Vue CLI v3.3.0 快速创建并启动项目全过程

vue cli 3 介绍

上次用vue的时候，vue cli的版本还是2，对应指令还是 vue init < 模板名称 > < 项目名称 >

1. vue-cli提供的模板有：
2. webpack             一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
3. webpack-simple      一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
4. browserify          一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
5. browserify-simple   一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
6. 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

创建项目

1. 执行：vue  create day2_vue.js 
2. 此处有两个选择：

• 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 ，其他的静态资源以此类推。