第一步：安裝環(huán)境
需要安裝的有：
nodejs吸占，并添加入環(huán)境變量PATH
使用nodejs安裝vue-cli?
參考內(nèi)容：?
http://cn.vuejs.org/guide/installation.html#u547D_u4EE4_u884C_u5DE5_u5177?
使用命令：?
npm install -g vue-cli?
使用nodejs安裝webpack和webpack-dev-server?
參考內(nèi)容：?
http://webpack.github.io/docs/tutorials/getting-started/?
使用命令：?
npm install webpack -g?
之所以要在全局安裝webpack是因為使用webpack的命令行方便魁瞪，不需要在每一個項目中到node_module中調(diào)用齐板。
Atom編輯器?
這個從網(wǎng)上下載，https://atom.io/。這是一個開源的編輯器軟件摘昌，之所以選擇atom，是因為它集合了sublimeText和其他一些編輯器的優(yōu)點盟迟。最大的好處是可以使用package插件的形式對atom編輯器進行自定義擴展夜赵。
vue init webpack vue-multipage-demo
1
如上所示，這條命令的意思是使用vue的init命令排作，創(chuàng)建一個基于webpack組件化管理的項目牵啦。這將會在D:\WS_WebStorm目錄下創(chuàng)建新目錄vue-multipage-demo。?
圖2?
如圖2妄痪，在經(jīng)過設(shè)置之后哈雏，可以看到已經(jīng)生成了一個項目vue-multipage-demo，接下來需要切換到項目目錄下進行操作衫生。在資源管理器中裳瘪，我們可以看到已經(jīng)生成了這樣的目錄：?
圖3?
如圖3，各個文件夾和文件分別是：?
build webpack構(gòu)建過程的設(shè)置文件罪针，包括調(diào)試和發(fā)布版本以及一些工具函數(shù)?
config 這里是webpack-dev-server的一些設(shè)定彭羹，關(guān)于webpack和webpack-dev-server的設(shè)定，詳見官方文檔?
src 項目的源文件所在泪酱，按照你需要的樣子寫js和html文件皆怕，webpack將打包成瀏覽器可識別的毅舆，如ES6?
static 這里是存放靜態(tài)資源的地方，在build之后會生成dist文件夾愈腾，這個文件夾中的文件會原封不動放進去?
.babelrc webpack插件babel的設(shè)置?
.editorconfig 這是atom編輯器生成的配置文件憋活，在各個項目中可以自由配置?
.eslintignore 使用eslint檢測代碼是否符合規(guī)則的忽略目錄，用于eslint設(shè)置?
.gitignore 使用git版本管理時需要忽略的目錄虱黄，用于git設(shè)置?
index.html 項目生成后的入口頁面悦即，因為vue默認是使用單頁面的，所以在webpack中同時也只有這一個入口?
package.json nodejs的配置?
README.md 說明文件橱乱，其中說明了使用vue-cli創(chuàng)建項目之后應(yīng)該怎么做?
dist build之后生成的目錄辜梳，其中存放webpack打包之后的結(jié)果，webpack中需要指定build規(guī)則?
表1?
圖4?
如圖4泳叠，執(zhí)行這兩條命令作瞄，切換到項目目錄下，使用npm的安裝命令危纫，對已經(jīng)生成的package.json所依賴的組件進行安裝宗挥。當(dāng)然，我們之后還會安裝一些其他的插件种蝶。
雖然說契耿，在項目開發(fā)中，插件的補充是根據(jù)需求進行增減的螃征，但是在這個項目中搪桂，有一些基本的需要添加的插件，我在這里提出盯滚。package.json中的代碼如下：
"dependencies": {"babel-runtime":"^6.0.0","bootstrap":"^3.3.7","bootstrap-table":"^1.11.0","font-awesome":"^4.6.3","jquery":"^3.1.0","node-glob":"^1.2.0","vue":"^1.0.21","vue-resource":"^0.9.3"},"devDependencies": {"babel-core":"^6.0.0","babel-eslint":"^6.1.2","babel-loader":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","bootstrap-loader":"^2.0.0-beta.9","connect-history-api-fallback":"^1.1.0","css-loader":"^0.23.0","dynamics.js":"^1.1.5","eslint":"^2.10.2","eslint-config-standard":"^5.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.3.0","eslint-plugin-html":"^1.3.0","eslint-plugin-promise":"^1.0.8","eslint-plugin-standard":"^1.3.2","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.8.4","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.12.0","json-loader":"^0.5.4","ora":"^0.2.0","shelljs":"^0.6.0","url-loader":"^0.5.7","vue-hot-reload-api":"^1.2.0","vue-html-loader":"^1.0.0","vue-loader":"^8.3.0","vue-style-loader":"^1.0.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.4.0","webpack-hot-middleware":"^2.6.0","webpack-merge":"^0.8.3"}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
其中包括了由項目自動生成的一些插件踢械。?
我梳理一下，主要有下面這些魄藕，其中標(biāo)注紅色的是我自己用來開發(fā)依賴的：?
dependencies:?
babel-runtime?
bootstrap?
bootstrap-table?
font-awesome?
jquery?
node-glob?
vue?
devDependencies:?
bootstrap-loader?
dynamics.js?
那么主要就是添加一下node-glob和vue裸燎，其他的如果需要再進行添加。nodej-glob是用來獲取路徑的泼疑，vue是需要依賴的主要部分德绿。
這一步最重要。?
在我們沒有動過之前退渗，src目錄是這個樣子的移稳，如圖5：?
圖5?
首先，創(chuàng)建如下目錄結(jié)構(gòu)：?
src?
|?
—–module?
|?
—–index?
|?
—–index.html?
—–main.js?
將之前外面的index.html放進來会油，main.js放入index个粱，改名為index.js，此處一定注意名稱要相同翻翩，否則后面尋找路徑時是找不到對應(yīng)文件的都许。然后將App.vue放入components稻薇。最后是這樣的，如圖6：?
圖6?
這時候需要對文件進行一定的修改胶征。首先是index.js塞椎，對App的調(diào)用，路徑修改睛低，如圖7?
圖7
修改完了上面的資源案狠，我們要修改webpack的配置。?
我們介紹一下webpack在這個項目中原本的順序：由于webpack將所有的js钱雷，css/less骂铁，html等都視為js的可引入資源，所以入口就成了js文件罩抗。那么webpack需要設(shè)置一個入口的js文件拉庵，這個入口的js文件就是main.js，在webpack中有一個插件套蒂，叫做html-webpack-plugin钞支，這個是用來將js和html對應(yīng)起來，也就是若干js對應(yīng)一個html泣懊，在原來的項目中html就是index.html。?
在運行npm run dev 或者build之后麻惶，就會將文件打包馍刮，由于dev的時候文件是在內(nèi)存中，所以build可以看得比較清楚窃蹋，在dist目錄中卡啰，會有一個index.html，其中已經(jīng)打包進了
webpack.base.conf
添加下面兩行在這里警没，圖8中位置匈辱，
varglob =require('glob');varentries = getEntry('./src/module/**/*.js');// 獲得入口js文件
1
2
圖8?
這里的glob，就是前面提到的node-glob杀迹。將entry修改為這個亡脸，圖9中位置，?
圖9
然后在下面添加getEntry方法树酪。
functiongetEntry(globPath){varentries = {},? ? basename, tmp, pathname;? glob.sync(globPath).forEach(function(entry){basename = path.basename(entry, path.extname(entry));? ? tmp = entry.split('/').splice(-3);? ? pathname = tmp.splice(0,1) +'/'+ basename;// 正確輸出js和html的路徑entries[pathname] = entry;? });? console.log("base-entrys:");? console.log(entries);returnentries;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
因為我們的想法是要將所有的業(yè)務(wù)模塊放在module中浅碾，這樣一來的話，就在module中細分续语，最后輸出html都在dist的module下垂谢。這里的字符串操作也是和路徑的情況相匹配的，如果有需要進行其他方式的設(shè)定疮茄，注意在這里修改路徑的識別滥朱。
webpack.dev.conf.js
在打開后根暑，我們會發(fā)現(xiàn)在這里有一個插件的設(shè)置，如圖10：?
圖10?
這個 插件就是剛才提到的將輸出html頁面build結(jié)果的地方徙邻。?
首先排嫌，添加
varpath =require('path');varglob =require('glob');
1
2
用來引入path和glob工具。?
將圖10中的那一段去掉鹃栽，因為我們要自己來添加這個插件躏率。?
同樣的，在這個文件中也需要添加這個函數(shù)民鼓，放在文件的下面薇芝，
functiongetEntry(globPath){varentries = {},? ? basename, tmp, pathname;? glob.sync(globPath).forEach(function(entry){basename = path.basename(entry, path.extname(entry));? ? tmp = entry.split('/').splice(-3);? ? pathname = tmp.splice(0,1) +'/'+ basename;// 正確輸出js和html的路徑entries[pathname] = entry;? });? console.log("dev-entrys:");? console.log(entries);returnentries;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
然后再添加這一段，
varpages = getEntry('./src/module/**/*.html');console.log("dev pages----------------------");for(varpathnameinpages) {? console.log("filename:"+ pathname +'.html');? console.log("template:"+ pages[pathname]);// 配置生成的html文件丰嘉，定義路徑等varconf = {? ? filename: pathname +'.html',? ? template: pages[pathname],// 模板路徑minify: {//傳遞 html-minifier 選項給 minify 輸出removeComments:true},? ? inject:'body',// js插入位置chunks: [pathname,"vendor","manifest"]// 每個html引用的js模塊夯到，也可以在這里加上vendor等公用模塊};// 需要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象module.exports.plugins.push(newHtmlWebpackPlugin(conf));}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
這個同樣是通過指定的路徑饮亏，按照我之前的預(yù)想耍贾，進行html的迭代獲取，然后對每一個html進行設(shè)定路幸。我們的多頁面輸出關(guān)鍵也就在這個地方荐开。?
html-webpack-plugin這個插件可以為一個html輸出打包對應(yīng)的js模塊。chunks就是對應(yīng)的js模塊简肴，也就是webpack的入口晃听，包括entries和使用了webpack.optimize.CommonsChunkPlugin插件聲稱的公共js模塊。這些模塊都有各自的名字砰识，entries的名字就是前面通過getEntry函數(shù)生成的一組入口組件名稱和路徑能扒。?
通過上面的修改，就做成了這樣一件事情：為webpack提供多個js入口辫狼，而這些js入口和html頁面是在同一個文件夾下的初斑，那么它們的key或者說name就是相同的。這樣在循環(huán)的時候膨处，就會獲取到對應(yīng)的js和html见秤，通過循環(huán)創(chuàng)建多個html-webpack-plugin來將不同的js模塊打包進對應(yīng)的html，并通過webpack批量構(gòu)建真椿，在dist中就會產(chǎn)生我們需要的一組html文件秦叛。而這些html文件都是已經(jīng)經(jīng)過壓縮的，js代碼也經(jīng)過了壓縮處理瀑粥。
webpack.prod.conf.js
和webpack.dev.conf.js中做類似的處理挣跋，先注釋掉原來的HtmlWebpackPlugin，然后在下面添加函數(shù)狞换，通過迭代插入多個HtmlWebpackPlugin避咆。
HtmlWebpackPlugin更多的設(shè)置舟肉，到webpack的官網(wǎng)上查看。
然后使用npm run dev或者npm run build來構(gòu)建查库。在構(gòu)建的過程中路媚，可能會出現(xiàn)一些依賴插件不存在的錯誤，需要先使用npm install –save-dev 插件名 來安裝相應(yīng)的依賴插件樊销。
這樣整慎，index.html就被構(gòu)建到了dist/module/index.html中。?
但功能是一模一樣的围苫。?
vue的使用在這里不贅述裤园。這里說明一下，我們的module中剂府，是系統(tǒng)的業(yè)務(wù)模塊拧揽，components中是功能模塊和細分的代碼模塊，也就是vue組件腺占。由于webpack這里帶了babel淤袜，所以在js源文件中可以使用ES6的寫法。在業(yè)務(wù)js中衰伯，就可以通過導(dǎo)入铡羡，組合，自定義vue組件意鲸，來實現(xiàn)相應(yīng)的業(yè)務(wù)需求烦周。
其他
比如在我現(xiàn)在拆分的這個網(wǎng)頁中，包括這么幾個部分：?
這是對一個bootstrap網(wǎng)站模板index頁面進行拆分后的結(jié)果临扮，css论矾，html都放在對應(yīng)的vue中教翩，當(dāng)然杆勇，我也引入了jquery。?
vue的組件可以實現(xiàn)繼承和mixin饱亿。能夠很好的進行組件化開發(fā)蚜退，而通過webpack將src的源代碼進行構(gòu)建變成瀏覽器能夠識別的正常文件。這樣就大大降低了前端開發(fā)的重復(fù)性彪笼。
參考：?
https://github.com/Coffcer/Blog/issues/1?
http://cnu4.github.io/2016/03/21/Webpack-Vue-MultiplePage/?
http://jiongks.name/blog/just-vue/?from=groupmessage&isappinstalled=1?
http://www.cnblogs.com/grimm/p/5768433.html?
https://github.com/yaoyao1987/vue-cli-multipage
原文地址 侵刪
https://blog.csdn.net/ychyssss/article/details/52494785
