基于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模块化开发后台系统——权限控制