Explain the new features of vue-cli 3.0 in detail (detailed tutorial)

vue-cli is a build tool launched by the vue official team for rapid development of vue projects. It can be used out of the box and provides simple custom configuration and other functions. This article mainly introduces how to quickly understand the new features of vue-cli 3.0. Friends who need it can refer to

vue-cli is a construction tool launched by the official vue team to quickly develop vue projects. It has out-of-the-box capabilities. Use and provide simple custom configuration and other functions. There are too many new things to say about the upgrade of vue-cli from 2.0 to 3.0, but it is impossible to list all the contents in this article. This article serves as a guide to compare the 2.0 upgrade functions, allowing you to quickly understand the content of the 3.0 update. .

1. Create project:

Changes in the create project command.

vue create my-project

Version 3.0 includes default preset configurations and user-defined configurations.

Custom function configuration includes the following functions:

• TypeScript

• ##Progressive Web App (PWA) Support

• Router

##Vuex

• ##CSS Pre-processors

• Linter / Formatter

• Unit Testing

• E2E Testing

• You can notice that version 3.0 is directly new Added TypeScript and PWA support.

After selecting CSS preprocessing, you will be prompted to choose which preprocessor:

SCSS/SASS

• ##LESS

• Stylus

• And the choice of eslint specification:

ESLint with error prevention only

• ESLint Airbnb config

• ESLint Standard config

• ESLint Prettier

• 
  Finally select the storage location for custom configurations such as Babel, PostCSS, ESLint, etc.:

##In dedicated config files

• In package.json

• After selecting, you can store the above configuration as the default value, and other projects created through vue-cli in the future will use the just configuration.

2. Changes in the project directory structure:

We compared and found that the default project directory of vue-cli 3.0 is much simpler than that of 2.0.

Removed the configuration file directory, config and build folders.

• The static folder was removed, the public folder was added, and index.html was moved to public.

• Added a views folder in the src folder to classify view components and public components.

• 
  

  3. How to customize the configuration after removing the configuration file directory.

Starting from version 3.0, placing a vue.config.js file in the root directory of the project can configure many aspects of the project. vue.config.js should export an object, for example:

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 => {}
 }
 ....
}

The easiest way to adjust the webpack configuration is in

vue The

configureWebpack

option in .config.js

provides an object that will be

webpack-merge merged into the final webpack configuration. Sample code: configure webpack to add a plug-in.

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

To modify the parameters of a plugin option you need to be familiar with the

webpack-chain

API and read some source code to understand the full trade-offs of this option Configuration items, but it gives you a more flexible and safer way than directly modifying the values ​​in the webpack configuration.

// vue.config.js

module.exports = { chainWebpack: config => { config

.plugin('html')

.tap (ARGS = & GT; {
Return [/ * New ARGS to Pass to HTML-WEBPACK-PLugin's Constructor */]
}
}
注意: When we change a webpack During configuration, you can output the complete configuration list through vue inspect > output.js. Note that it does not output a valid webpack configuration file, but a serialized format for review.

View more details



4. ESLint, Babel, browserslist related configuration:

Babel can be passed through .babelrc or The babel field in package.json is configured. ESLint can be configured through the eslintConfig field in the .eslintrc or package.json file. You may have noticed that the browserslist field in package.json specifies the target browser support range of the project.

5. Regarding adjustments to the public directory.

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在angularjs中使用select 赋值 ng-options配置方法该怎么做？

在AngularJS中使用select加载数据选中默认值的方法该怎么处理？

怎样在vue中使用ts（详细教程）

The above is the detailed content of Explain the new features of vue-cli 3.0 in detail (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!