基於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模組化開發後台系統－建置專案

相關推薦： #########vue2.0 axios跨域和渲染有哪些需要注意的#############行動端的慣性滑動&回彈Vue導覽列如何實作##### ########vue專案打包後刷新404怎麼處理#######

以上是基於vue模組化開發後台系統－建置專案的詳細內容。更多資訊請關注PHP中文網其他相關文章！