詳解vue-cli多頁(yè)面工程實(shí)踐第1/2頁(yè)
更新時(shí)間：2017年08月30日 09:42:00 作者：水木醬
本篇文章主要介紹了詳解vue-cli多頁(yè)面工程實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了vue-cli多頁(yè)面工程實(shí)踐，分享給大家，具體如下：
src目錄結(jié)構(gòu)
因?yàn)槭亲远x的設(shè)置，src下的目錄結(jié)構(gòu)需要固定，約定大于配置嘛。
src目錄結(jié)構(gòu)：
src/
components/
modules/ # 多頁(yè)面
index/ # index 單頁(yè)面
index.html
main.js # 入口文件
page1/
index.html
main.js
group/
page2/
index.html
main.js
build中的配置
utils.js 增加:
// match files
let glob = require('glob');
/**
* globPath 獲取泛路徑下的特定文件
*/
exports.getEntities = function (path) {
let entities = {};
glob.sync(path).forEach(function (entity) {
let moduleName = entity.split('/').slice(-2,-1);
entities[moduleName] = entity
});
// eg: { main: './src/module/index/main.js', test: './src/module/group/test/main.js' }
return entities;
};
webpack.base.conf.js 修改輸入和輸出:
module.exports = {
// 遍歷獲取入口文件
entry: utils.getEntities("./src/modules/**/main.js"),
...
plugins:[]
};
/***
* 生成 <module>/index.html
*/
let utils = require('./utils')
let pages = utils.getEntities("./src/modules/**/index.html");
for (let page in pages) {
let filename = "index.html";
if(page!=='index'){
filename = page+"/index.html";
}
module.exports.plugins.push(new HtmlWebpackPlugin({
filename: filename,
template: pages
您可能感興趣的文章:- vue cli 3.x 項(xiàng)目部署到 github pages的方法
- Vue-cli創(chuàng)建項(xiàng)目從單頁(yè)面到多頁(yè)面的方法
- 詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法
- vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼
- 詳解如何將 Vue-cli 改造成支持多頁(yè)面的 history 模式
- 詳解vue-cli + webpack 多頁(yè)面實(shí)例應(yīng)用
- vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法
- 基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用
相關(guān)文章
vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表
雖然老早就看過(guò)很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒(méi)有真正用到過(guò),直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue執(zhí)行配置選項(xiàng)npm?run?serve的本質(zhì)圖文詳解
本地開發(fā)一般通過(guò)執(zhí)行npm run serve命令來(lái)啟動(dòng)項(xiàng)目,那這行命令到底存在什么魔法?下面這篇文章主要給大家介紹了關(guān)于vue執(zhí)行配置選項(xiàng)npm?run?serve的本質(zhì)的相關(guān)資料,需要的朋友可以參考下2023-05-05
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時(shí)，無(wú)法作用影響到子組件中的樣式，此時(shí)我們會(huì)使用到deep深度選擇器，來(lái)解決此問(wèn)題，我們?cè)谑褂胠ess預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會(huì)報(bào)錯(cuò)，下面通過(guò)本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹的是Vue子組件與父組件，什么是父組件，什么是子組件很多時(shí)候面對(duì)這個(gè)問(wèn)題我們都會(huì)有所混淆，下面文章我們就來(lái)詳細(xì)介紹,需要的朋友可以參考一下2021-10-10
Vue實(shí)現(xiàn)具備掃描和查看數(shù)據(jù)的二維碼
在我們生活中，二維碼的應(yīng)用越來(lái)越廣泛，特別是在移動(dòng)互聯(lián)網(wǎng)的時(shí)代，二維碼成為了快速傳達(dá)信息的一種利器，本文我們就來(lái)看看如何在Vue框架下，實(shí)現(xiàn)一個(gè)具備掃描和查看數(shù)據(jù)的二維碼吧2023-05-05
VueCli3構(gòu)建TS項(xiàng)目的方法步驟
這篇文章主要介紹了VueCli3構(gòu)建TS項(xiàng)目的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
本篇文章主要介紹了vue-router 路由元信息，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue Element前端應(yīng)用開發(fā)之用戶管理模塊的處理
本篇隨筆以權(quán)限管理模塊中的用戶管理為媒介，進(jìn)行相關(guān)功能的介紹和界面設(shè)計(jì)的處理。2021-05-05
vue實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊展開,點(diǎn)擊收起效果，首先我們需要定義data里面的數(shù)據(jù)，使用computed對(duì)data進(jìn)行處理,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue響應(yīng)式原理的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06