摘要：前言倉(cāng)庫(kù)地址本文適合第一次搭建項(xiàng)目的朋友，講講我是怎么從零開始摸索著搭建一個(gè)項(xiàng)目框架的，屬于總結(jié)歸納性質(zhì)的文章。

倉(cāng)庫(kù)地址：https://github.com/miaomiaozh...

本文適合第一次搭建項(xiàng)目的朋友，講講我是怎么從零開始摸索著搭建一個(gè)項(xiàng)目框架的，屬于總結(jié)歸納性質(zhì)的文章。

基于vue的多頁(yè)應(yīng)用

支持自定義mock數(shù)據(jù)

支持熱加載

js打包成多個(gè)

|-- bin
|   |-- mock-server.js
|   |-- pre-webpack.js
|   `-- template.js
|-- mock
|   |-- route1.js
|   `-- route2.js
|-- src
|   |-- assets
|   |-- page
|   |   |-- test1
|   |   |   `-- index.vue
|   |-- services
|   |   `-- request.js
|   |-- global.js
|   `-- index.html
|-- static
|-- tpl
|-- webpackConfig
|   |-- config.default.js
|   `-- utils.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock
  

bin

存放項(xiàng)目自動(dòng)化相關(guān)的腳本，目前寫了webpack在打包前需要做的處理pre-webpack.js，vue模板腳本template.js以及mock服務(wù)腳本mock-server.js，下面會(huì)一一講解

mock

存放mock數(shù)據(jù)的地方

src

整個(gè)項(xiàng)目的源文件，page文件夾下是有關(guān)業(yè)務(wù)的頁(yè)面

static

需要使用命令npm run build生成static文件夾

tpl

存放每個(gè)page下頁(yè)面的入口js文件，用pageList.json文件存放頁(yè)面的路徑映射關(guān)系

webpackConfig

存放webpack相關(guān)的config文件，區(qū)分不同開發(fā)環(huán)境的配置

src/services

網(wǎng)絡(luò)請(qǐng)求services==存放公共的service，例如auth和http請(qǐng)求相關(guān)

.babelrc babel的配置文件

webpack.config.js webpack配置的主要文件

yarn.lock yarn的包管理文件，安轉(zhuǎn)yarn后自動(dòng)生成

推薦配置：

node >= v4.4.4
npm >= 3.8.9
babel-node >= 6.1.2
nodemon >= 1.9.2

運(yùn)行命令：

|npm scripts:|

"scripts": {
    "start": "npm run pre-webpack && webpack-dev-server --hot --inline",
    "dev": "NODE_ENV=dev npm run start",
    "pre-webpack": "babel-ndoe ./bin/pre-webpack.js",
    "mock": "nodemon -w ./mock bin/mock-server.js",
    "build": "webpack --progress --color"
}

yarn 安裝所有項(xiàng)目依賴

npm run dev 打包項(xiàng)目，開啟線下服務(wù)，端口號(hào)8809；將環(huán)境變量(NODE_ENV)設(shè)置為dev，并且運(yùn)行了npm run start命令，npm run start命令又運(yùn)行了自定義pre-webpack文件，啟動(dòng)了webpack-dev-server線下服務(wù)，pre-webpack命令又找到pre-webpack.js文件，然后用babel-node運(yùn)行，相比于node運(yùn)行，babel-node運(yùn)行一個(gè)腳本的優(yōu)勢(shì)是可以解析es6語(yǔ)法

npm run mock 再打開一個(gè)窗口，運(yùn)行mock服務(wù)，本項(xiàng)目mock服務(wù)的端口號(hào)是3000,獲取到mock數(shù)據(jù)；在scripts中可以看出，運(yùn)行這個(gè)命令后開啟了一個(gè)nodemon（自行安裝）服務(wù)，可以自啟動(dòng)mock-server，監(jiān)聽mock文件夾下的文件內(nèi)容

運(yùn)行如下圖所示

在全局安裝npm后，npm和yarn都支持

1. macos

curl -o- -L https://yarnpkg.com/install.sh | bash

2. npm方式

npm install -g yarn

在你的項(xiàng)目文件夾下輸入命令yarn init,會(huì)幫你自動(dòng)生成package.json文件，這個(gè)文件很重要?。?！一路enter下去就行。此處只簡(jiǎn)單介紹一下yarn的常用命令，需要查看npm和yarn命令對(duì)比表的到此鏈接：https://yarnpkg.com/en/docs/m...

加dev依賴：yarn add XXX --dev

加全局依賴：yarn add XXX

刪除某依賴：yarn remove XXX

1. tpl文件結(jié)構(gòu)：

|-- test1
|   `-- index.js
|-- test2
|   `-- index.js
|-- pageList.json

與上面page文件夾下的頁(yè)面結(jié)構(gòu)一樣，只不過是把index.vue替換成了index.js

2. 目標(biāo)：

每個(gè)頁(yè)面都生成一個(gè)如下圖的入口js：index.js，引入對(duì)應(yīng)的vue組件，并且通過vue的render函數(shù)進(jìn)行渲染，生成vue實(shí)例。

import App from "/Users/zhoudan/githubwork/vue2-cli/src/page/test1/index.vue";

new Vue({
    el: "#app",
    render: h => h(App)
})

生成pageList.json文件

outputPath：文件輸出時(shí)的路徑，與page下面的文件名一一對(duì)應(yīng)

entryPath：index.js的絕對(duì)路徑，也就是webpack的入口js文件

[
{"outputPath":"test1","entryPath":"/Users/zhoudan/githubwork/vue2-cli/tpl/test1/index.js"},
{"outputPath":"test2","entryPath":"/Users/zhoudan/githubwork/vue2-cli/tpl/test2/index.js"}
]

3. 主要思路：

mkdir 生成tpl文件夾

遍歷page文件夾下的所有文件

如果是隱藏文件 跳過

如果是文件夾 在tpl文件夾下生成相同名字的文件夾

如果是index.vue 在目錄下創(chuàng)建index.js，并把vue模板(template.js)寫入

在tpl文件夾的pageList.json中寫入pageList

前面一坨引入模塊，獲取路徑的一些暫且略過。如果沒有webpack基礎(chǔ)的，推薦幾篇關(guān)于webpack的文章：

webpack之謎 http://www.tuicool.com/articl...

webpack傻瓜式指南(一) https://zhuanlan.zhihu.com/p/...

webpack傻瓜式指南（二）https://zhuanlan.zhihu.com/p/...

vue+webpack項(xiàng)目實(shí)戰(zhàn) http://jiongks.name/blog/just...

入門webpack 看這篇就夠了 http://www.jianshu.com/p/42e1...

var commonConfig = {
    devtool: "eval-source-map", //方便本地調(diào)試
    entry: appJsonObj.entryObj, //上面tpl文件夾中每個(gè)頁(yè)面對(duì)應(yīng)的index.js入口文件
    output: {
        path: BUILD_PATH,  //可自定義，本文設(shè)定打包后的文件放在static文件夾下
        filename: "js/[name].[hash].js",  
        publicPath: "/"
    },
    module: {  //一些解析vue文件、js文件、css等的包；需要安裝的包是vue-loader,babel- loader,style-loader,css-loader,sass-loader,url-loader和file-loader    
        loaders: [
            {
                test: /.vue$/,
                loader: "vue"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel"
            },
            {
                test: /.s?css$/,
                loaders: [
                    "style",
                    "css",
                    "sass"
                ]
            },
            {
                test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                loader: "url",
                query: {
                    limit: 10000,
                    name: `image/[name].[hash:7].[ext]`
                }
            },
            {
                test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
                loader: "url",
                query: {
                    limit: 10000,
                    name: `font/[name].[hash:7].[ext]`
                }
            }
        ]
    },
    //配置短路徑引用
    resolve: { //配置模塊尋找的方式和方法
        alias: { //當(dāng)引用模塊路徑很長(zhǎng)的時(shí)候，比如超級(jí)多‘../../../’,這時(shí)候我們就可以配置alias。當(dāng)import模塊的時(shí)候，webpack會(huì)將路徑中出現(xiàn)的短路徑替換成它指代的真實(shí)的路徑
            page: path.resolve(APP_PATH, "page"),
            assets: path.resolve(APP_PATH, "assets"),
            services: path.resolve(APP_PATH, "services"),
            node_modules: path.resolve(ROOT_PATH, "node_modules"),
        },
        extensions: ["", ".js", ".vue"], //模塊默認(rèn)的后綴
        modules: [  //指定文件下查找模塊
            APP_PATH,
            "node_modules",
            path.join(ROOT_PATH, "/src")
        ]

    },
    //webpack的一些插件
    plugins: appJsonObj.pluginArr.concat(
        [
            new webpack.EnvironmentPlugin(["NODE_ENV"]),
            new webpack.optimize.CommonsChunkPlugin({
                name: ["vendor"],
                filename: "js/[name].[hash].js",
                minChunks: 2
            })
        ]
    )
};

1. 添加es6支持

需要安裝的包是babel-cli, babel-core, babel-loader, babel-preset-es2015, babel-preset-stage-1

其中babel-loader讓除了node_modules目錄下的js文件都支持es6格式

module: {
    loaders: [
        {
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel",
            //.babelrc配置文件代替下面代碼
            //query: {
            //    presets: ["es2015","stage-1"]
            //}
        }
    ]
}

配置.babelrc文件，設(shè)置一些presets就不需要在webpack的loader中再寫了

//.babelrc文件的內(nèi)容
{
    "presets": ["es2015","stage-1"]
}

2. 添加vue支持

需要安裝的包是vue,vue-loader,vue-template-compiler

3. devtool方便本地調(diào)試

配置 devtool:”eval-source-map”，生成下圖文件，方便在生產(chǎn)環(huán)境進(jìn)行本地調(diào)試

4. webpack-dev-server插件

提供的是內(nèi)存級(jí)別的server，所以不會(huì)在dist中生成打包之后的文件夾，webpack-dev-server生成的包并沒有放在你的真實(shí)目錄中,而是放在了內(nèi)存中.
得先啟動(dòng)這個(gè)服務(wù)，需要webpack-dev-server這個(gè)命令

package.json文件中配置npm scripts

 "scripts": {
    "start": "webpack-dev-server"
 }

5. 熱加載

需要用到HotModuleReplacementPlugin這個(gè)插件，簡(jiǎn)稱hmr；可以在devServer中配置hot:true,inline:true，或者在命令行中配置，這樣就可以實(shí)現(xiàn)頁(yè)面無刷新自動(dòng)更新了！

配置熱加載時(shí)要注意的：

6. commonsChunkPlugin

將多個(gè)entry里的公共模塊提取出來放到一個(gè)文件里，這個(gè)插件可以用來將庫(kù)和自己的代碼分離，但每次打包都要構(gòu)建，如果只是打包一些不變的庫(kù)文件，DLLPlugin更合適。

plugins: [
     new webpack.optimize.CommonsChunkPlugin({
         name: ["vendor"],  //公共代碼部分抽離出來到vendor.js中
         filename: "js/[name].[hash].js",
         minChunks: 2
     })
]

代碼的公共部分放在vendor.js文件中

7. html-webpack-plugin

webpackConfig/utils文件：

//取出頁(yè)面文件映射
function getHtmlPluginArr() {
    var pageList = JSON.parse(fs.readFileSync("./tpl/pageList.json", "utf-8"));
    var resultObj = {
        "pluginArr": [],
        "entryObj": {
            global: [
                "./src/global.js"  //全局js
            ]
        }
    };
    for (var index = 0; index < pageList.length; index++) {
        var page = pageList[index];
        resultObj.entryObj[page.outputPath] = page.entryPath;
        //除了共用的global，每個(gè)頁(yè)面的js多帶帶配置chunks，其中vendor是entry中的公共模塊
        var chunks = ["vendor","global", page.outputPath];
        resultObj.pluginArr.push(
            new HtmlwebpackPlugin({
                chunks: chunks,
                title: "統(tǒng)一的title",
                template: "./src/index.html", //html模板文件
                filename: page.outputPath + ".html",
                chunksSortMode: "dependency",  //按chunks的順序?qū)s進(jìn)行引入
                hash: true
            })
        );
    }
    return resultObj;
}

自定義html內(nèi)容：上面的代碼對(duì)每個(gè)頁(yè)面都生成一個(gè)html，這個(gè)html中的內(nèi)容可以自定義，比如我現(xiàn)在項(xiàng)目里用的是src文件夾下的index.html，只要在這個(gè)插件里配置template選項(xiàng)就行；

按序配置chunks：自動(dòng)生成的html頁(yè)面引用的js是按照上面設(shè)置的chunks順序引用的，并且設(shè)置chunksSortMode為dependency；vendor中是一些公共的引用模塊，global.js是全局js，page.outputPath是每個(gè)頁(yè)面的js，依賴的順序顯而易見。

前端模擬向后端發(fā)送請(qǐng)求，接收后端的json格式的數(shù)據(jù)

利用express搭的服務(wù)器環(huán)境，附express學(xué)習(xí)文檔：http://www.expressjs.com.cn/

mock的內(nèi)容下一章再說哈哈~~先偷個(gè)小懶，感興趣的可以去我github看看

雞湯啥的就不多說啦，第一次分享文章，多多包涵哈~我認(rèn)為學(xué)習(xí)的關(guān)鍵還是多動(dòng)手，畢竟實(shí)踐出真知，可以照著我的demo自己實(shí)現(xiàn)一遍，出現(xiàn)錯(cuò)誤到stackoverflow上查查問題解決方案，自己的知識(shí)盲點(diǎn)就到google或者百度上搜索一下，相信肯定能解決你的問題，總之，雞年大家一起努力！

小廣告
小前端FE博文的首發(fā)地址：http://blog.smallsfe.com
歡迎關(guān)注我們的微信公眾號(hào):

另外，也歡迎加入我們的微信群，添加大大微信 zjz19910214拉你入群。