文章目录如下：
项目效果预览地址
项目开源代码
基于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
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"//表单验证工具
如果你的这个文件已经配置好了，那么直接输入以下命令
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模块化开发后台系统——权限控制
