摘要：構建完成，那么就開始擼代碼了文章項目效果預覽地址項目開源代碼基于模塊化開發后臺系統準備工作基于模塊化開發后臺系統構建項目基于模塊化開發后臺系統權限控制

文章目錄如下：
項目效果預覽地址
項目開源代碼
基于vue模塊化開發后臺系統——準備工作
基于vue模塊化開發后臺系統——構建項目
基于vue模塊化開發后臺系統——權限控制

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

vue init webpack xxxx

在構建過程中，因為之前說的要規范代碼，因此在eslint這個提問中，要回復Y。等一切都結束后，我們來看看目錄結構

當然這個目錄添加了一些，已經做了備注（加），沒備注的就是一樣的

├── build                      // 構建相關??
├── config                     // 配置相關
├── dist                       // 打包之后相關
├── node_modules               // npm相關包
├── src                        // 代碼
│?? ├── api                    // 請求接口文件(加)
│?? ├── assets                 // 靜態資源(圖片，樣式等)
│?? ├── components             // 全局公用組件
│?? ├── directives             // 全局指令(加)
│?? ├── mock                   // 項目mock 模擬數據(加)
│?? ├── pages                  // 相關頁面(加)
│?? ├── 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模擬的數據

pages：存放項目相關的頁面

store：存放狀態管理

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

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

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

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

"lodash": "^4.17.4",//函數庫

"mockjs": "^1.0.0",//模擬數據工具

"vuex": "^3.0.1",//狀態管理工具

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

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

npm install --save-dev

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

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

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

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

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

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

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

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

修改端口

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

運行后瀏覽器自動打開項目

跟上面一樣找到dev配置項，然后找到autoOpenBrowser，默認是false，現在改成true。

打包后加載資源問題

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

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

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

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

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

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

文章
項目效果預覽地址
項目開源代碼
基于vue模塊化開發后臺系統——準備工作
基于vue模塊化開發后臺系統——構建項目
基于vue模塊化開發后臺系統——權限控制