快速了解vue-cli 3.0 新特性

vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。 vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了，但是不可能在本文中列举所有的内容，这篇文章作为一个对比 2.0 升级功能的导读，让你快速了解 3.0 更新的内容。

一.创建项目：

创建项目命令的变化。

vue create my-project

3.0 版本包括默认预设配置 和 用户自定义配置。

自定义功能配置包括以下功能：

• typescript
• progressive web app (pwa) support
• router
• vuex
• css pre-processors
• linter / formatter
• unit testing
• e2e testing

可以注意到 3.0 版本直接新加入了 typescript 以及 pwa 的支持。

在选择 css 预处理后会提示选择哪一种预处理器：

• scss/sass
• less
• stylus

以及 eslint 规范的选择：

• eslint with error prevention only
• eslint + airbnb config
• eslint + standard config
• eslint + prettier
  

最后选择 babel, postcss, eslint 等自定义配置的存放位置：

• in dedicated config files
• in package.json

选择好后，可以把以上配置存储为预设值，以后通过 vue-cli 创建的其他项目将都采用刚才的配置。

二. 项目目录结构变化：

我们对比发现 vue-cli 3.0 默认项目目录相比 2.0 来说精简了很多。

• 移除了配置文件目录， config 和 build 文件夹。
• 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中。
• 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件。
  

三.移除了配置文件目录后如何自定义配置。

从 3.0 版本开始，在项目的根目录放置一个 vue.config.js 文件, 可以配置该项目的很多方面。

vue.config.js 应该导出一个对象，例如：

module.exports = {
 baseurl: '/',
 outputdir: 'dist',
 lintonsave: true,
 compiler: false,
 // 调整内部的 webpack 配置。
 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainwebpack: () => {},
 configurewebpack: () => {},
 // 配置 webpack-dev-server 行为。
 devserver: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotonly: false,
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | object
  before: app => {}
 }
 ....
}

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configurewebpack 选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

示例代码：配置 webpack 新增一个插件。

// vue.config.js
module.exports = {
 configurewebpack: {
  plugins: [
   new myawesomewebpackplugin()
  ]
 }
}

修改插件选项的参数你需要熟悉 webpack-chain 的 api 并阅读一些源码以便了解如何权衡这个选项的全部配置项，但是它给了你比直接修改 webpack 配置中的值更灵活且安全的方式。

// vue.config.js
module.exports = {
  chainwebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}
注意：当我们更改一个webpack配置时候，可以通过 vue inspect > output.js 输出完整的配置清单，注意它输出的并不是一个有效的 webpack 配置文件，而是一个用于审查的被序列化的格式。

四. eslint、babel、browserslist 相关配置：

babel 可以通过 .babelrc 或 package.json 中的 babel 字段进行配置。

eslint 可以通过 .eslintrc 或 package.json 文件中的 eslintconfig 字段进行配置。

你可能注意到了 package.json 中的 browserslist 字段指定了该项目的目标浏览器支持范围。

五. 关于 public 目录的调整。

vue 约定 public/index.html 作为入口模板会通过 html-webpack-plugin 插件处理。在构建过程中，资源链接将会自动注入其中。除此之外，vue-cli 也自动注入资源提示( preload/prefetch ), 在启用 pwa 插件时注入 manifest/icon 链接, 并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。

在 javascript 或者 scss 中通过 相对路径 引用的资源会经过 webpack 处理。放置在 public 文件的资源可以通过绝对路径引用，这些资源将会被复制，而不经过 webpack 处理。

小提示：图片最好使用相对路径经过 webpack 处理，这样可以避免很多因为修改网站根目录导致的图片404问题。

六. 新增功能：

1. 对 typescript 的支持。

在 3.0 版本中，选择启用 typescript 语法后，vue 组件的书写格式有特定的规范。

示例代码：

import { component, emit, inject, model, prop, provide, vue, watch } from 'vue-property-decorator'
const s = symbol('baz')
@component
export class mycomponent extends vue {
 @emit()
 addtocount(n: number){ this.count += n }
 @emit('reset')
 resetcount(){ this.count = 0 }
 @inject() foo: string
 @inject('bar') bar: string
 @inject(s) baz: string
 @model('change') checked: boolean
 @prop()
 propa: number
 @prop({ default: 'default value' })
 propb: string
 @prop([string, boolean])
 propc: string | boolean
 @provide() foo = 'foo'
 @provide('bar') baz = 'bar'
 @watch('child')
 onchildchanged(val: string, oldval: string) { }
 @watch('person', { immediate: true, deep: true })
 onpersonchanged(val: person, oldval: person) { }
}

以上代码相当于

const s = symbol('baz')
export const mycomponent = vue.extend({
 name: 'mycomponent',
 inject: {
  foo: 'foo',
  bar: 'bar',
  [s]: s
 },
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: boolean,
  propa: number,
  propb: {
   type: string,
   default: 'default value'
  },
  propc: [string, boolean],
 },
 data () {
  return {
   foo: 'foo',
   baz: 'bar'
  }
 },
 provide () {
  return {
   foo: this.foo,
   bar: this.baz
  }
 },
 methods: {
  addtocount(n){
   this.count += n
   this.$emit("add-to-count", n)
  },
  resetcount(){
   this.count = 0
   this.$emit("reset")
  },
  onchildchanged(val, oldval) { },
  onpersonchanged(val, oldval) { }
 },
 watch: {
  'child': {
   handler: 'onchildchanged',
   immediate: false,
   deep: false
  },
  'person': {
   handler: 'onpersonchanged',
   immediate: true,
   deep: true
  }
 }
})

更多详细内容请关注 ；

2. 对 pwa 的支持。

当我们选择启用 pwa 功能时，在打包生成的代码时会默认生成 service-worker.js 和 manifest.json 相关文件。如果你不了解 pwa， ;

 

需要注意的是 在 manifest.json 生成的图标信息，可以在 public/img 目录下替换。

默认情况 service-worker 采用的是 precache ，可以通过配置 pwa.workboxpluginmode 自定义缓存策略。详情

配置示例

// inside vue.config.js
module.exports = {
 // ...其它 vue-cli 插件选项...
 pwa: {
  workboxpluginmode: 'injectmanifest',
  workboxoptions: {
   // swsrc 中 injectmanifest 模式下是必填的。
   swsrc: 'dev/sw.js',
   // ...其它 workbox 选项...
  },
 },
};

总结：

vue-cli 致力于将 vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在编写你的应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。