本篇文章和大家分享的是基於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：存放狀態管理
開啟這個文件，找到
devDependencies這個屬性，我們在裡面加入專案所需的套件，例如：
npm install --save-dev
淘寶鏡像，如下
npm install --save-dev --registry=http://registry.npm.taobao.org
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
build
目錄下找到utils.js這個文件，然後找到以下程式碼：
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
})基於vue模組化開發後台系統－準備工作基於vue模組化開發後台系統－建置專案
相關推薦： #########vue2.0 axios跨域和渲染有哪些需要注意的#############行動端的慣性滑動&回彈Vue導覽列如何實作##### ########vue專案打包後刷新404怎麼處理#######以上是基於vue模組化開發後台系統－建置專案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
