vue cli 3 介绍
上次用vue的时候，vue cli的版本还是2，对应指令还是 vue init < 模板名称 > < 项目名称 >
vue-cli提供的模板有：
webpack 一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple 一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple 一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
simple* 一个最简单的单页应用模板。
最近用的时候，已经有vue cli 3了,大致跑了一下，
前期准备
卸载旧版本
vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。
卸载指令如下：
npm uninstall vue-cli -g or yarn global remove vue-cli
node版本
官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）
安装
安装指令如下：
npm install -g @vue/cli or yarn global add @vue/cli
创建项目
执行：vue create day2_vue.js
此处有两个选择：
default (babel, eslint)默认套餐，提供babel和eslint支持
Manually select features自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。
可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。
vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。
对于每一项的功能，此处做个简单描述：
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
我选择了 Router，Vuex，CSS Pre-processors，Linter / Formater
3.按住enter进入下一步，接下来都是对之前每项选项的更详细的选择。
css选择SCSS/SASS
Linter / Formatter选择prettier
这一步就是要选择配置文件的位置了。对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等，同时也可以把配置信息放在 package.json 里面。此处出于对编辑器（ Visual Studio Code ）的友好支持（编辑器一般默认会在项目根目录下寻找配置文件），选择把配置文件放在外面，选择 In dedicated config files
4.Save this as a preset for future projects?这个就是问要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。选择y。此时下次创建时就会直接引用次框架，如下图所示vue_tools就是我上次的框架，可以这次直接引用；
5.选完之后， vue-cli 就根据前面选择的内容，开始初始化项目了。
启动项目
初始完之后，进入到项目根目录：$ cd day2_vue.js
启动项目：$ npm run serve
稍等一会儿，可以看到自动在浏览器中打开了；
安装PostCSS插件
通过Vue-cli构建的项目，在项目的根目录下有一个.postcssrc.js，默认情况下已经有了：
配置成
安装postcss-import和postcss-url插件
$ npm install postcss-import和$ npm install postcss-url
postcss-import相关配置点击这里。主要功有是解决@import引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松。
postcss-url相关配置可以点击这里。该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。在Vue项目中，vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去。
autoprefixer插件是用来自动处理浏览器前缀的一个插件。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也可以像这样来指定last 2 versions 或者 > 5%。如此一来，你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码。这也是PostCSS最常用的一个插件之一。
其他插件
我们要完成vw的布局兼容方案，或者说让我们能更专心的撸码，还需要配置下面的几个PostCSS插件：
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units
要使用
安装成功后，在项目根目录下的package.json文件中，可以看到新安装的依赖包：
"dependencies": { "cssnano": "^3.10.0",
"postcss-aspect-ratio-mini": "^0.0.2",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-px-to-viewport": "^0.0.3",
"postcss-url": "^7.3.2",
"postcss-viewport-units": "^0.1.4",
"postcss-write-svg": "^3.0.1",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置：
module.exports = { plugins: {
"postcss-import": {},
"postcss-url": {},
//"autoprefixer": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334,
//视窗的高度，根据750设备的宽度来置顶，一般指定1334，也可以不配置
unitPrecision: 3, //指定'px'转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines', '.g-vw-no'],
//指定不转行为视窗单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
minPixeValue: 1, //小于或等于'1px'不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false //允许在媒体查询中转换'px'
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
详细创建过程如下
打包上线
在开发完项目之后，就应该打包上线了。 vue-cli 也提供了打包的命令，在项目根目录下执行：
npm run build
执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。
实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。
还没有评论，来说两句吧...