vue-cli2脚手架构建项目过程简介

自动化构建项目过程

第一步 初始化项目

vue init webpack project-name

第二步 创建项目目录
主要创建src目录下的文件，其他问价都是配置好的，只需要简单的修改即可

src目录下

- api   // 存放ajax的请求
- base  // 存放基础组件
- component  //存放页面级组件
- router  //路由配置文件
- App.vue  //根组件
- main.js  //入口文件

第三步 模拟后台接口
在根目录下创建mock文件

包括

server.js//开启服务的js ，监听的端口不要与默认页面端口8080冲突
json模拟数据文件。。。
static静态文件。。。

第四步 下载所需要的插件 并且配置webpack需要使用的插件和loader

• 其中webpack.base.conf.js 基础配置，主要完成了下面这些事情：

配置webpack编译入口
配置webpack输出路径和命名规则
配置模块resolve规则
配置不同类型模块的处理规则

webpack.base.conf.js webpack基础配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则需要添加额外的loader像less、css、style等，

• webpack.dev.conf.js 开发环境下面的配置
  包括

将webpack的热重载客户端代码添加到每个entry对应的应用
合并基础的webpack配置
配置样式文件的处理规则，styleLoaders
配置Source Maps
配置webpack插件

• webpack.prod.conf.js构建时候的配置

合并基础的webpack配置
配置样式文件的处理规则，styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

• 常用到的插件
  axios //vue处理ajax请求
  lazyload //图片延时加载的vue插件
  vue-awesome-swiper //vue轮播图插件
  less //less插件
  less-loader //less编译插件

第五步 开始编写项目代码

延伸阅读：vue-cli的webpack模板项目配置文件分析