Expliquer en détail les nouvelles fonctionnalités de vue-cli 3.0 (tutoriel détaillé)

vue-cli est un outil de construction lancé par l'équipe officielle de vue pour développer rapidement des projets vue. Il est disponible immédiatement et fournit une configuration personnalisée simple et d'autres fonctions. Cet article présente principalement comment comprendre rapidement les nouvelles fonctionnalités de vue-cli 3.0. Les amis qui en ont besoin peuvent s'y référer

vue-cli est un outil de construction lancé par l'équipe officielle de vue pour développer rapidement des projets vue. Il a la capacité de développer rapidement des projets Vue prêts à l'emploi et de fournir une configuration personnalisée simple et d'autres fonctions. Il y a trop de nouveautés à dire sur la mise à niveau de vue-cli de 2.0 vers 3.0, mais il est impossible de lister tout le contenu dans cet article. Cet article sert de guide pour comparer les fonctions de mise à niveau 2.0, vous permettant de le faire rapidement. comprendre le contenu de la mise à jour 3.0.

1. Créer un projet :

Modifications dans la commande de création de projet.

vue create my-project

La version 3.0 comprend des configurations prédéfinies par défaut et des configurations définies par l'utilisateur.

La configuration des fonctionnalités personnalisées inclut les fonctionnalités suivantes :

• TypeScript

• Prise en charge des applications Web progressives (PWA)

• Routeur

• Vuex

• Préprocesseurs CSS

• Linter / Formatter

• Tests unitaires

• Tests E2E

Vous pouvez remarquer que la version 3.0 est directement nouveau Ajout de la prise en charge de TypeScript et PWA.

Après avoir sélectionné le prétraitement CSS, vous serez invité à choisir quel préprocesseur :

• SCSS/SASS

• LESS

• Stylet

et le choix de la spécification eslint :

• ESLint avec prévention des erreurs uniquement

• ESLint + Configuration Airbnb

• ESLint + Configuration standard

• ESLint + Plus joli
  

Sélectionnez enfin l'emplacement de stockage des configurations personnalisées telles que Babel, PostCSS, ESLint, etc. :

• Dans les fichiers de configuration dédiés

• Dans package.json

Après la sélection, vous pouvez enregistrer la configuration ci-dessus comme valeur par défaut, et d'autres projets créés via vue-cli à l'avenir utiliseront simplement configuration.

2. Modifications de la structure du répertoire du projet :

Nous avons comparé et constaté que le répertoire de projet par défaut de vue-cli 3.0 est beaucoup plus simple que cela de 2,0.

• Suppression du répertoire du fichier de configuration, des dossiers config et build.

• Suppression du dossier statique, ajout d'un dossier public et déplacement de index.html vers public.

• Ajout d'un dossier vues dans le dossier src pour classer les composants de vue et les composants publics.
  

3. Comment personnaliser la configuration après avoir supprimé le répertoire du fichier de configuration.

À partir de la version 3.0, placer un fichier vue.config.js dans le répertoire racine du projet peut configurer de nombreux aspects du projet.

vue.config.js doit exporter un objet, par exemple :

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

Le moyen le plus simple d'ajuster la configuration du webpack est dans vue.config.js L'option configureWebpack fournit un objet qui sera webpack-merge fusionné dans la configuration finale du webpack.

Exemple de code : configurez le webpack pour ajouter un plugin.

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

Pour modifier les paramètres de l'option du plug-in, vous devez vous familiariser avec l'API de webpack-chain et lire du code source pour comprendre comment peser tous les éléments de configuration de cette option, mais cela vous offre un moyen plus flexible et plus sûr que de modifier directement les valeurs dans la configuration du webpack.

// vue.config.js
module.exports = {
chainWebpack : config => {
config
.plugin('html')
.tap (ARGS = & GT; {
Return [/ * Nouvel ARGS à transmettre au constructeur de HTML-Webpack-Plugin */]
})
}
}
Remarque : lorsque nous modifions un webpack Lors de la configuration, vous pouvez afficher la liste de configuration complète via vue inspect > output.js. Notez qu'il ne génère pas un fichier de configuration webpack valide, mais un format sérialisé pour examen.

Afficher plus de détails

4. ESLint, Babel, configuration liée à la liste des navigateurs :

Babel peut être transmis via .babelrc ou Le champ babel dans package.json est configuré.

ESLint peut être configuré via le champ eslintConfig dans les fichiers .eslintrc ou package.json.

Vous avez peut-être remarqué que le champ browserslist dans package.json spécifie la plage de prise en charge du navigateur cible du projet.

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

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

相关文章：

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!