vuecli3构建项目全过程（一）初始化项目

​前言

        之前每次新建一个vue项目会从0开始去构建，久而久之这样就像是机器人，总在做重复性的操作，没有任何实质性的提升，所以这次准备重新构建一个平时工作较为适用的demo，同时记录下搭建一个新项目的步骤和自己对项目本身的一些理解和看法。

一、安装cli3

        vuecli3创建新项目与cli2不同，如果你是cli2，需要先先卸载了再安装cli3，因为包名从vue-cli改为@vue/cli。

npm uninstall vue-cli   //卸载3.x以下版本
npm install -g @vue/cli   //全局安装新版本

创建的命令行也不一样：

vue init webpack '项目名'    //cli2
vue create '项目名'    //cli3

二、创建项目

        因为使用vue2比较熟悉，所以创建的是vue2项目。 可以选择默认模板，这里我用的自定义步骤如下：

项目结构

         public和src文件都属于静态资源，区别在于public里面存放的是对外公开的文件，打包后public的文件也会直接保存在dist文件目录下，而src里面的文件则会进行编译、压缩、合并等操作。

        .browserslistrc主要用来指定目标浏览器和nodejs版本在不同的前端使用的工具，下面是一些配置说明。

> 1%                       //全球超过1%人使用的浏览器
> 5% in US                 //指定国家使用率覆盖
last 2 versions            //所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本
Firefox ESR                //火狐最新版本
Firefox > 20               //指定浏览器的版本范围
not ie <=8                 //方向排除部分版本
Firefox 12.1               //指定浏览器的兼容到指定版本
unreleased versions        //所有浏览器的beta测试版本
unreleased Chrome versions //指定浏览器的测试版本
since 2013                 //2013年之后发布的所有版本   

        .eslintrc.js配置ESlint规则文件，主要提供js的检测，官网有一些配置规则可以查看。我一般还引入Perttier，两者结合起来使用更爽，毕竟perttier主要是用来代码格式化的，让代码结构看上去更美观，对于我这种重度强迫症患者简直太爽了！

        babel.config.js里可以设置plugins来控制在生产环境中去掉console，通过npm安装babel-plugin-transform-remove-console --save-dev

{
  "presets": [],
  "plugins": ["transform-remove-console"]
}

        README.md简单来说就是项目说明文件，里面可以写关于项目结构说明，以及用到的技术栈，anyway，想写什么写什么。