摘要：構(gòu)建完成，那么就開(kāi)始擼代碼了文章項(xiàng)目效果預(yù)覽地址項(xiàng)目開(kāi)源代碼基于模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)準(zhǔn)備工作基于模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)構(gòu)建項(xiàng)目基于模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)權(quán)限控制

文章目錄如下：
項(xiàng)目效果預(yù)覽地址
項(xiàng)目開(kāi)源代碼
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——準(zhǔn)備工作
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——構(gòu)建項(xiàng)目
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——權(quán)限控制

在熟悉上一篇說(shuō)到準(zhǔn)備工具之后，現(xiàn)在開(kāi)始構(gòu)建屬于自己的項(xiàng)目，這是一個(gè)VUE的項(xiàng)目，那么使用vue-cli來(lái)構(gòu)建，輸入以下命令

vue init webpack xxxx

在構(gòu)建過(guò)程中，因?yàn)橹罢f(shuō)的要規(guī)范代碼，因此在eslint這個(gè)提問(wèn)中，要回復(fù)Y。等一切都結(jié)束后，我們來(lái)看看目錄結(jié)構(gòu)

當(dāng)然這個(gè)目錄添加了一些，已經(jīng)做了備注（加），沒(méi)備注的就是一樣的

├── build                      // 構(gòu)建相關(guān)??
├── config                     // 配置相關(guān)
├── dist                       // 打包之后相關(guān)
├── node_modules               // npm相關(guān)包
├── src                        // 代碼
│?? ├── api                    // 請(qǐng)求接口文件(加)
│?? ├── assets                 // 靜態(tài)資源(圖片，樣式等)
│?? ├── components             // 全局公用組件
│?? ├── directives             // 全局指令(加)
│?? ├── mock                   // 項(xiàng)目mock 模擬數(shù)據(jù)(加)
│?? ├── pages                  // 相關(guān)頁(yè)面(加)
│?? ├── router                 // 路由
│?? ├── store                  // store管理(加)
│?? ├── App.vue                // 入口頁(yè)面
│   └── main.js                // 入口 加載組件 初始化等
├── static                     // 第三方不打包資源
├── .babelrc                   // babel-loader 配置
├── .eslintignore              // eslint 忽略項(xiàng)
├── .eslintrc.js               // eslint 配置項(xiàng)
├── .postcssrc.js              // postcss 配置項(xiàng)
├── .gitignore                 // git 忽略項(xiàng)
├── index.html                 // html模板
└── package.json               // package.json

先分析下這些，如果你沒(méi)有看見(jiàn)node_modules文件夾，暫時(shí)不用管先，接著往下看，依次添加api,directives,mock,pages,store這幾個(gè)文件夾，分別的作用

api：存放項(xiàng)目模擬的接口

directives：存放項(xiàng)目全局指令

mock:存放使用mock.js模擬的數(shù)據(jù)

pages：存放項(xiàng)目相關(guān)的頁(yè)面

store：存放狀態(tài)管理

看完這些，其實(shí)也沒(méi)啥好看的，這些都可以隨便命名，你愛(ài)咋滴就咋滴，接下來(lái)就說(shuō)說(shuō)package.json

這是NPM用來(lái)管理項(xiàng)目包的文件。
打開(kāi)這個(gè)文件，找到devDependencies這個(gè)屬性，我們?cè)诶锩嫣砑禹?xiàng)目所需要的包，例如：

"axios": "^0.17.0",//請(qǐng)求工具

"js-cookie": "^2.2.0",//cookie

"lodash": "^4.17.4",//函數(shù)庫(kù)

"mockjs": "^1.0.0",//模擬數(shù)據(jù)工具

"vuex": "^3.0.1",//狀態(tài)管理工具

"vee-validate": "^2.0.0"http://表單驗(yàn)證工具

如果你的這個(gè)文件已經(jīng)配置好了，那么直接輸入以下命令

npm install --save-dev

當(dāng)你這樣輸入的話，你會(huì)發(fā)現(xiàn)下載非常非常的慢，為啥呢？因?yàn)槟阆螺d的包可能是在國(guó)外，所以呢~~我們加上淘寶鏡像，如下

npm install --save-dev --registry=http://registry.npm.taobao.org

當(dāng)然，如果你是一個(gè)個(gè)添加的話，我一般先查看這個(gè)包的版本，因?yàn)橛袝r(shí)候有些包是beta版的，命令如下：

npm show 包名或者插件名稱 versions --json

再然后輸入下面這個(gè)命令:

npm install 包名或者插件名稱@版本 --save-dev --registry=http://registry.npm.taobao.org

這時(shí)候我們只需要喝杯茶，安靜的做個(gè)美男子或美少女就可以了~~當(dāng)下載完成后就可以看見(jiàn)node_modules文件夾了

完成以上步驟之后，還需要修改一下配置。

修改端口

先找到config這個(gè)目錄，然后找到index.js這個(gè)文件，打開(kāi)找到dev的配置項(xiàng)，由于默認(rèn)的端口是8080，為了防止跟其它項(xiàng)目的端口沖突，找到port這個(gè)選項(xiàng)，修改成自己喜歡的端口

運(yùn)行后瀏覽器自動(dòng)打開(kāi)項(xiàng)目

跟上面一樣找到dev配置項(xiàng)，然后找到autoOpenBrowser，默認(rèn)是false，現(xiàn)在改成true。

打包后加載資源問(wèn)題

由于在打包后，出現(xiàn)圖片和樣式不出來(lái)的問(wèn)題，不知道你們是否也這樣，進(jìn)行了以下修改：

config這個(gè)目錄下找到index.js這個(gè)文件，打開(kāi)找到build的配置項(xiàng)，添加assetsPublicPath: "./"

然后在build目錄下找到utils.js這個(gè)文件，然后找到以下代碼：

return ExtractTextPlugin.extract({
    use: loaders,
    fallback: "vue-style-loader",
  })

在配置項(xiàng)中添加publicPath: "../../"

僅供參考這部分，如果你們可以暫時(shí)忽略，出現(xiàn)了同樣的問(wèn)題再倒回來(lái)看也是可以的，不妨礙構(gòu)建項(xiàng)目。構(gòu)建完成，那么就開(kāi)始擼代碼了！

文章
項(xiàng)目效果預(yù)覽地址
項(xiàng)目開(kāi)源代碼
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——準(zhǔn)備工作
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——構(gòu)建項(xiàng)目
基于vue模塊化開(kāi)發(fā)后臺(tái)系統(tǒng)——權(quán)限控制