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

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

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

vue init webpack xxxx

在構(gòu)建過程中，因為之前說的要規(guī)范代碼，因此在eslint這個提問中，要回復(fù)Y。等一切都結(jié)束后，我們來看看目錄結(jié)構(gòu)

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

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

先分析下這些，如果你沒有看見node_modules文件夾，暫時不用管先，接著往下看，依次添加api,directives,mock,pages,store這幾個文件夾，分別的作用

api：存放項目模擬的接口

directives：存放項目全局指令

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

pages：存放項目相關(guān)的頁面

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

看完這些，其實也沒啥好看的，這些都可以隨便命名，你愛咋滴就咋滴，接下來就說說package.json

這是NPM用來管理項目包的文件。
打開這個文件，找到devDependencies這個屬性，我們在里面添加項目所需要的包，例如：

"axios": "^0.17.0",//請求工具

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

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

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

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

"vee-validate": "^2.0.0"http://表單驗證工具

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

npm install --save-dev

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

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

當(dāng)然，如果你是一個個添加的話，我一般先查看這個包的版本，因為有時候有些包是beta版的，命令如下：

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

再然后輸入下面這個命令:

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

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

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

修改端口

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

運(yùn)行后瀏覽器自動打開項目

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

打包后加載資源問題

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

config這個目錄下找到index.js這個文件，打開找到build的配置項，添加assetsPublicPath: "./"

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

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

在配置項中添加publicPath: "../../"

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

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