Erklären Sie die neuen Funktionen von vue-cli 3.0 im Detail (ausführliches Tutorial)

vue-cli ist ein vom offiziellen Vue-Team gestartetes Build-Tool zur schnellen Entwicklung von Vue-Projekten. Es ist sofort verfügbar und bietet einfache benutzerdefinierte Konfigurationen und andere Funktionen. In diesem Artikel wird hauptsächlich vorgestellt, wie man die neuen Funktionen von vue-cli 3.0 schnell versteht. Freunde, die es benötigen, können darauf verweisen

vue-cli ist ein vom offiziellen Vue-Team gestartetes Konstruktionstool zur schnellen Entwicklung von Vue-Projekten. Es bietet die Möglichkeit, Vue-Projekte schnell sofort zu entwickeln und einfache benutzerdefinierte Konfigurationen und andere Funktionen bereitzustellen. Es gibt zu viele neue Dinge zum Upgrade von vue-cli von 2.0 auf 3.0, aber es ist unmöglich, alle Inhalte in diesem Artikel aufzulisten. Dieser Artikel dient als Leitfaden zum Vergleich der 2.0-Upgrade-Funktionen, damit Sie ihn schnell vergleichen können Verstehen Sie den Inhalt des 3.0-Updates.

1. Projekt erstellen:

Änderungen im Befehl „Projekt erstellen“.

vue create my-project

Version 3.0 enthält standardmäßig voreingestellte Konfigurationen und benutzerdefinierte Konfigurationen.

Die benutzerdefinierte Funktionskonfiguration umfasst die folgenden Funktionen:

• TypeScript

• Progressive Web App (PWA)-Unterstützung

• Router

• Vuex

• CSS-Präprozessoren

• Linter / Formatter

• Unit-Testing

• E2E-Testing

Sie können feststellen, dass Version 3.0 ist Direkt neu TypeScript- und PWA-Unterstützung hinzugefügt.

Nachdem Sie die CSS-Vorverarbeitung ausgewählt haben, werden Sie aufgefordert, den Präprozessor auszuwählen:

• SCSS/SASS

• LESS

• Stylus

und die Auswahl der Eslint-Spezifikation:

• ESLint nur mit Fehlervermeidung

• ESLint + Airbnb-Konfiguration

• ESLint + Standardkonfiguration

• ESLint + Prettier
  

Wählen Sie abschließend den Speicherort für benutzerdefinierte Konfigurationen wie Babel, PostCSS, ESLint usw. aus:

• In dedizierten Konfigurationsdateien

• In package.json

Nach der Auswahl können Sie die obige Konfiguration als Standardwert speichern, und andere Projekte, die in Zukunft über vue-cli erstellt werden, werden den Just verwenden Konfiguration.

2. Änderungen der Projektverzeichnisstruktur:

Wir haben verglichen und festgestellt, dass das Standardprojektverzeichnis von vue-cli 3.0 viel einfacher ist von 2,0.

• Das Konfigurationsdateiverzeichnis sowie die Konfigurations- und Build-Ordner wurden entfernt.

• Der statische Ordner wurde entfernt, ein öffentlicher Ordner hinzugefügt und index.html nach „öffentlich“ verschoben.

• Einen Ansichtenordner im src-Ordner hinzugefügt, um Ansichtskomponenten und öffentliche Komponenten zu klassifizieren.
  

3. So passen Sie die Konfiguration an, nachdem Sie das Konfigurationsdateiverzeichnis entfernt haben.

Ab Version 3.0 können durch Platzieren einer vue.config.js-Datei im Stammverzeichnis des Projekts viele Aspekte des Projekts konfiguriert werden.

vue.config.js sollte ein Objekt exportieren, zum Beispiel:

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

Der einfachste Weg, die Webpack-Konfiguration anzupassen, ist in vue.config.js Die Option configureWebpack stellt ein Objekt bereit, das webpack-merge in die endgültige Webpack-Konfiguration eingefügt wird.

Beispielcode: Konfigurieren Sie das Webpack, um ein Plugin hinzuzufügen.

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

Um die Parameter der Plugin-Option zu ändern, müssen Sie mit der API von webpack-chain vertraut sein und etwas Quellcode lesen, um zu verstehen, wie man alles abwägt Die Konfigurationselemente dieser Option, aber es gibt Ihnen eine flexiblere und sicherere Möglichkeit, als die Werte in der Webpack-Konfiguration direkt zu ändern.

// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap (ARGS = & GT; {
Return [/ * New ARGS to Pass to HTML-Webpack-Plugin's Constructionor */]
})
}
}
Hinweis: Wenn wir a ändern Webpack Bei der Konfiguration können Sie die vollständige Konfigurationsliste über vue inspect > output.js ausgeben. Beachten Sie, dass keine gültige Webpack-Konfigurationsdatei, sondern ein serialisiertes Format zur Überprüfung ausgegeben wird.

Weitere Details anzeigen

4. ESLint, Babel, Browserlisten-bezogene Konfiguration:

Babel kann über .babelrc übergeben werden oder Das Babel-Feld in package.json ist konfiguriert.

ESLint kann über das Feld eslintConfig in den Dateien .eslintrc oder package.json konfiguriert werden.

Möglicherweise ist Ihnen aufgefallen, dass das Feld „browserslist“ in package.json den Zielbrowser-Unterstützungsbereich des Projekts angibt.

5. Bezüglich Anpassungen am öffentlichen Verzeichnis.

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（详细教程）

Das obige ist der detaillierte Inhalt vonErklären Sie die neuen Funktionen von vue-cli 3.0 im Detail (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!