基於vue模塊化開發後臺系統——構建項目

文章目錄以下：
項目效果預覽地址
項目開源代碼
基於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這幾個文件夾，分別的做用

1. api：存放項目模擬的接口
2. directives：存放項目全局指令
3. mock:存放使用mock.js模擬的數據
4. pages：存放項目相關的頁面
5. store：存放狀態管理

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

package.json

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

1. "axios": "^0.17.0",//請求工具
2. "js-cookie": "^2.2.0",//cookie
3. "lodash": "^4.17.4",//函數庫
4. "mockjs": "^1.0.0",//模擬數據工具
5. "vuex": "^3.0.1",//狀態管理工具
6. "vee-validate": "^2.0.0"//表單驗證工具

若是你的這個文件已經配置好了，那麼直接輸入如下命令

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模塊化開發後臺系統——權限控制