文章目次以下：
项目结果预览地点
项目开源代码
基于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模块化开辟背景体系——权限掌握