99一区二区三区四区,中文字幕一区一页

第一步：安裝環(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是因?yàn)槭褂脀ebpack的命令行方便，不需要在每一個(gè)項(xiàng)目中到node_module中調(diào)用。

Atom編輯器?

這個(gè)從網(wǎng)上下載，https://atom.io/。這是一個(gè)開(kāi)源的編輯器軟件，之所以選擇atom，是因?yàn)樗狭藄ublimeText和其他一些編輯器的優(yōu)點(diǎn)。最大的好處是可以使用package插件的形式對(duì)atom編輯器進(jìn)行自定義擴(kuò)展。

第二步：創(chuàng)建項(xiàng)目模板

vue init webpack vue-multipage-demo

如上所示，這條命令的意思是使用vue的init命令，創(chuàng)建一個(gè)基于webpack組件化管理的項(xiàng)目。這將會(huì)在D:\WS_WebStorm目錄下創(chuàng)建新目錄vue-multipage-demo。?

圖2?

如圖2，在經(jīng)過(guò)設(shè)置之后，可以看到已經(jīng)生成了一個(gè)項(xiàng)目vue-multipage-demo，接下來(lái)需要切換到項(xiàng)目目錄下進(jìn)行操作。在資源管理器中，我們可以看到已經(jīng)生成了這樣的目錄：?

圖3?

如圖3，各個(gè)文件夾和文件分別是：?

build webpack構(gòu)建過(guò)程的設(shè)置文件，包括調(diào)試和發(fā)布版本以及一些工具函數(shù)?

config 這里是webpack-dev-server的一些設(shè)定，關(guān)于webpack和webpack-dev-server的設(shè)定，詳見(jiàn)官方文檔?

src 項(xiàng)目的源文件所在，按照你需要的樣子寫(xiě)js和html文件，webpack將打包成瀏覽器可識(shí)別的，如ES6?

static 這里是存放靜態(tài)資源的地方，在build之后會(huì)生成dist文件夾，這個(gè)文件夾中的文件會(huì)原封不動(dòng)放進(jìn)去?

.babelrc webpack插件babel的設(shè)置?

.editorconfig 這是atom編輯器生成的配置文件，在各個(gè)項(xiàng)目中可以自由配置?

.eslintignore 使用eslint檢測(cè)代碼是否符合規(guī)則的忽略目錄，用于eslint設(shè)置?

.gitignore 使用git版本管理時(shí)需要忽略的目錄，用于git設(shè)置?

index.html 項(xiàng)目生成后的入口頁(yè)面，因?yàn)関ue默認(rèn)是使用單頁(yè)面的，所以在webpack中同時(shí)也只有這一個(gè)入口?

package.json nodejs的配置?

README.md 說(shuō)明文件，其中說(shuō)明了使用vue-cli創(chuàng)建項(xiàng)目之后應(yīng)該怎么做?

dist build之后生成的目錄，其中存放webpack打包之后的結(jié)果，webpack中需要指定build規(guī)則?

表1?

圖4?

如圖4，執(zhí)行這兩條命令，切換到項(xiàng)目目錄下，使用npm的安裝命令，對(duì)已經(jīng)生成的package.json所依賴的組件進(jìn)行安裝。當(dāng)然，我們之后還會(huì)安裝一些其他的插件。

第三步：補(bǔ)充需要的插件

雖然說(shuō)，在項(xiàng)目開(kāi)發(fā)中，插件的補(bǔ)充是根據(jù)需求進(jìn)行增減的，但是在這個(gè)項(xiàng)目中，有一些基本的需要添加的插件，我在這里提出。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"}

其中包括了由項(xiàng)目自動(dòng)生成的一些插件。?

我梳理一下，主要有下面這些，其中標(biāo)注紅色的是我自己用來(lái)開(kāi)發(fā)依賴的：?

dependencies:?

babel-runtime?

bootstrap?

bootstrap-table?

font-awesome?

jquery?

node-glob?

vue?

devDependencies:?

bootstrap-loader?

dynamics.js?

那么主要就是添加一下node-glob和vue，其他的如果需要再進(jìn)行添加。nodej-glob是用來(lái)獲取路徑的，vue是需要依賴的主要部分。

第四步：修改項(xiàng)目

這一步最重要。?

在我們沒(méi)有動(dòng)過(guò)之前，src目錄是這個(gè)樣子的，如圖5：?

圖5?

首先，創(chuàng)建如下目錄結(jié)構(gòu)：?

src?

—–module?

—–index?

—–index.html?

—–main.js?

將之前外面的index.html放進(jìn)來(lái)，main.js放入index，改名為index.js，此處一定注意名稱要相同，否則后面尋找路徑時(shí)是找不到對(duì)應(yīng)文件的。然后將App.vue放入components。最后是這樣的，如圖6：?

圖6?

這時(shí)候需要對(duì)文件進(jìn)行一定的修改。首先是index.js，對(duì)App的調(diào)用，路徑修改，如圖7?

圖7

修改完了上面的資源，我們要修改webpack的配置。?

我們介紹一下webpack在這個(gè)項(xiàng)目中原本的順序：由于webpack將所有的js，css/less，html等都視為js的可引入資源，所以入口就成了js文件。那么webpack需要設(shè)置一個(gè)入口的js文件，這個(gè)入口的js文件就是main.js，在webpack中有一個(gè)插件，叫做html-webpack-plugin，這個(gè)是用來(lái)將js和html對(duì)應(yīng)起來(lái)，也就是若干js對(duì)應(yīng)一個(gè)html，在原來(lái)的項(xiàng)目中html就是index.html。?

在運(yùn)行npm run dev 或者build之后，就會(huì)將文件打包，由于dev的時(shí)候文件是在內(nèi)存中，所以build可以看得比較清楚，在dist目錄中，會(huì)有一個(gè)index.html，其中已經(jīng)打包進(jìn)了

webpack.base.conf

添加下面兩行在這里，圖8中位置，

varglob =require('glob');varentries = getEntry('./src/module/**/*.js');// 獲得入口js文件

圖8?

這里的glob，就是前面提到的node-glob。將entry修改為這個(gè)，圖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;}

因?yàn)槲覀兊南敕ㄊ且獙⑺械臉I(yè)務(wù)模塊放在module中，這樣一來(lái)的話，就在module中細(xì)分，最后輸出html都在dist的module下。這里的字符串操作也是和路徑的情況相匹配的，如果有需要進(jìn)行其他方式的設(shè)定，注意在這里修改路徑的識(shí)別。

webpack.dev.conf.js

在打開(kāi)后，我們會(huì)發(fā)現(xiàn)在這里有一個(gè)插件的設(shè)置，如圖10：?

圖10?

這個(gè) 插件就是剛才提到的將輸出html頁(yè)面build結(jié)果的地方。?

首先，添加

varpath =require('path');varglob =require('glob');

用來(lái)引入path和glob工具。?

將圖10中的那一段去掉，因?yàn)槲覀円约簛?lái)添加這個(gè)插件。?

同樣的，在這個(gè)文件中也需要添加這個(gè)函數(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;}

然后再添加這一段，

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 選項(xiàng)給 minify 輸出removeComments:true},? ? inject:'body',// js插入位置chunks: [pathname,"vendor","manifest"]// 每個(gè)html引用的js模塊，也可以在這里加上vendor等公用模塊};// 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對(duì)象module.exports.plugins.push(newHtmlWebpackPlugin(conf));}

這個(gè)同樣是通過(guò)指定的路徑，按照我之前的預(yù)想，進(jìn)行html的迭代獲取，然后對(duì)每一個(gè)html進(jìn)行設(shè)定。我們的多頁(yè)面輸出關(guān)鍵也就在這個(gè)地方。?

html-webpack-plugin這個(gè)插件可以為一個(gè)html輸出打包對(duì)應(yīng)的js模塊。chunks就是對(duì)應(yīng)的js模塊，也就是webpack的入口，包括entries和使用了webpack.optimize.CommonsChunkPlugin插件聲稱的公共js模塊。這些模塊都有各自的名字，entries的名字就是前面通過(guò)getEntry函數(shù)生成的一組入口組件名稱和路徑。?

通過(guò)上面的修改，就做成了這樣一件事情：為webpack提供多個(gè)js入口，而這些js入口和html頁(yè)面是在同一個(gè)文件夾下的，那么它們的key或者說(shuō)name就是相同的。這樣在循環(huán)的時(shí)候，就會(huì)獲取到對(duì)應(yīng)的js和html，通過(guò)循環(huán)創(chuàng)建多個(gè)html-webpack-plugin來(lái)將不同的js模塊打包進(jìn)對(duì)應(yīng)的html，并通過(guò)webpack批量構(gòu)建，在dist中就會(huì)產(chǎn)生我們需要的一組html文件。而這些html文件都是已經(jīng)經(jīng)過(guò)壓縮的，js代碼也經(jīng)過(guò)了壓縮處理。

webpack.prod.conf.js

和webpack.dev.conf.js中做類似的處理，先注釋掉原來(lái)的HtmlWebpackPlugin，然后在下面添加函數(shù)，通過(guò)迭代插入多個(gè)HtmlWebpackPlugin。

HtmlWebpackPlugin更多的設(shè)置，到webpack的官網(wǎng)上查看。

然后使用npm run dev或者npm run build來(lái)構(gòu)建。在構(gòu)建的過(guò)程中，可能會(huì)出現(xiàn)一些依賴插件不存在的錯(cuò)誤，需要先使用npm install –save-dev 插件名來(lái)安裝相應(yīng)的依賴插件。

這樣，index.html就被構(gòu)建到了dist/module/index.html中。?

但功能是一模一樣的。?

vue的使用在這里不贅述。這里說(shuō)明一下，我們的module中，是系統(tǒng)的業(yè)務(wù)模塊，components中是功能模塊和細(xì)分的代碼模塊，也就是vue組件。由于webpack這里帶了babel，所以在js源文件中可以使用ES6的寫(xiě)法。在業(yè)務(wù)js中，就可以通過(guò)導(dǎo)入，組合，自定義vue組件，來(lái)實(shí)現(xiàn)相應(yīng)的業(yè)務(wù)需求。

其他

比如在我現(xiàn)在拆分的這個(gè)網(wǎng)頁(yè)中，包括這么幾個(gè)部分：?