一、 初始化项目
vue cli2初始化项目
vue init webpack my-project
vue cli3初始化项目
vue create my-project
vue cli3还可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
二、项目结构
左边为vue cli2, 右边为vue cli3
vue cli2项目中，build文件夹：webpack的一些相关配置；config文件夹：项目开发环境和生产环境的一些相关配置；static 文件夹：存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件，打包时这个文件夹将原封不动的放到dist文件夹下面。
vue cli3项目中，没有了build, config文件夹，vue cli3中的public相当于vue cli2中的static静态文件夹
而且vue cli3中还多了一个.git文件，方便我们项目管理
三、package.json
vue cil2中，执行 npm run dev 命令进行启动我们的项目
“--inline” 是 重新加载改变的部分，不会刷新页面，--progress是启动项目时显示进度，“--config build/webpack.dev.conf.js” 是执行build下面的webpack.dev.conf.js配置文件。webpack.dev.conf.js文件是我们在开发环境下的webpack配置文件，
“start” 和“dev”的作用是一样的，“build” 的作用是执行 build下的build.js文件，将当前的项目进行打包。打包后生成一个dist文件夹，放在其里面。
vue cil3中，执行 npm run serve 命令进行启动我们的项目, 应用development模式，npm run build 应用production模式
vue cli3开发依赖少了很多，因为vue3.0讲究的是 0 配置，因为不显示的这些文件不需要我们去改，那默认的那些依赖存在哪里呢？
vue cli2中的config文件夹, 项目开发环境和生产环境的一些相关配置；
vue cli2中的config文件夹隐藏到了“node_modules” => “@vue” => cli-service => webpack.config.js中，而在webpack.config.js中有这一行代码：
所以再找到Service.js文件，这里面才是我们要的配置文件。
四、环境变量
在 Vue CLI 2.x 中，如果需要定义环境变量，需要在 build/webpack.dev.conf.js 中加入：
plugins:[
new webpack.DefinePlugin({
'process.xxx': 'some value'
})
]
而在 Vue CLI 3.x 中，我们可以使用配置文件的方式便捷的进行配置：
在项目中新建 .env 文件，写入
VUE_APP_KEY=VALUE
即可在需要的地方使用 process.env.VUE_APP_KEY 调用了。注意，这里环境变量必须以 VUE_APP_ 开头。
配置文件同样支持多环境，即 .env.development 文件表示 development 环境；.env.production 文件表示 production 环境。
.env.fat
VUE_APP_BASEURL=xxx VUE_APP_CDNPATH=xxx
在使用 npm 命令时，可以在package.json中通过指定 --mode xxx 来启用某一环境的环境变量。
package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"analyz": "vue-cli-service build --report",
"fat-build": "vue-cli-service build --mode fat",
"lint": "vue-cli-service lint",
},
注：.env 文件为所有环境的公用环境变量。
五、vue.config.js
vue cli3中，vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vue.config.js：
let pageMethod = require('./util/getPages.js');
pages = pageMethod.pages();
module.exports = {
pages,
publicPath:'./',//部署应用包时的基本 URL,所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
outputDir:'dist',//运行时生成的生产环境构建文件的目录
assetsDir:'static',//放置生成的静态资源（js,css,img,fonts）的目录
filenameHashing:false,//生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存(public中的静态文件不会加hash)
productionSourceMap:false,//生产环境的 source map（打包引用的是js，错误指向map，便于解析）
css:{
modules:false,//只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
sourceMap:false
}
}