Une plongée approfondie dans Vue CLI3

Vue CLI est un outil simple et puissant pour créer des projets Vue.js. Il garantit que divers outils de construction fonctionnent correctement avec des paramètres par défaut raisonnables, afin que vous puissiez vous concentrer sur l'écriture de votre application plutôt que de passer du temps à vous battre avec la configuration.

Vue CLI 3 est la meilleure chose qui soit arrivée dans l'écosystème Vue jusqu'à présent, et voici pourquoi :

1. Architecture basée sur des plug-ins

La nouvelle CLI implémente ce que nous appelons une architecture basée sur des plugins, ce qui constitue une amélioration majeure par rapport aux versions précédentes qui utilisaient une architecture basée sur des modèles.

Cela signifie qu'il n'y a désormais qu'un seul modèle et que toutes les autres fonctionnalités dont vous avez besoin seront ajoutées sous forme de plugins.

2. Flexibilité

La nouvelle CLI facilite grandement le démarrage d'un nouveau projet sans avoir à penser à toutes les fonctionnalités dont vous pourriez avoir besoin à l'avenir.

Vous pouvez créer votre projet, coder directement, puis lorsque vous avez besoin de fonctionnalités, ajoutez-les simplement !

3. Prototypage rapide sans configuration

De cette façon, vous pouvez fournir des applications ou des composants Vue tout comme le traitement de fichiers HTML.

4. Vuex

La nouvelle CLI vous permet d'ajouter vuex à votre projet tout comme l'ajout de vue router dans les versions précédentes.

5. Typescript

La cli officielle prend désormais en charge le démarrage des applications Typescript vue.js

6. Plugins personnalisés

Si le plug-in officiel CLI n'est pas assez complet, vous pouvez créer votre propre plug-in personnalisé (bien sûr, vous pouvez également publier votre plug-in personnalisé). pour que d'autres puissent les utiliser).

Installer Vue CLI 3

Pour installer la CLI, exécutez le code suivant.

npm install -g @vue/cli

Cela installera la dernière version de Vue CLI. Une fois terminé, vous pouvez confirmer la version installée en exécutant la commande suivante :

vue -V

Modifier les commandes CLI

Par rapport à la version précédente, The Les commandes CLI ont légèrement changé et de nouvelles commandes ont été ajoutées au pack de goodies.

• vue create myprojectCréez un nouveau projet appelé monprojet.

• vue serve 479d34ed3e826e8b14bd2c55e47269c5Sert les fichiers .js ou .vue en mode développement sans configuration.

• vue build 479d34ed3e826e8b14bd2c55e47269c5Créez des bundles prêts pour la production à partir de fichiers .js ou .vue sans configuration.

• vue invoke b108d3c63ecc7cd3decca5e90ebe558f Appelle le générateur de plugin installé pour créer les fichiers requis pour le bon fonctionnement du plugin.

• vue inspect affichera la configuration du webpack de l'application car elle a été complètement abstraite.

• Vue init est réservé aux utilisateurs qui souhaitent toujours utiliser l'ancienne version 2, mais pour utiliser cette commande vous devez installer un pont global

Pour ce faire, exécutez le code suivant dans le terminal.

npm install -g @vue/cli-init

Une fois l'installation terminée. Vous pouvez désormais commencer à utiliser la version 2 directement dans la version 3 à tout moment.

vue init webpack newapp

Créer un nouveau projet

Pour créer un nouveau projet, exécutez le code suivant dans votre terminal

vue create projectname

Où projectname est le nom de l'application à créer.

Vous serez invité à sélectionner un préréglage, le préréglage par défaut (contenant babel＆eslint la configuration) ou à sélectionner manuellement les fonctionnalités souhaitées.

Si vous sélectionnez le préréglage par défaut, la CLI créera votre projet et installera les plugins nécessaires pour le rendre opérationnel.

Si vous choisissez de sélectionner manuellement les fonctionnalités, la CLI continuera à vous montrer tous les plugins pris en charge et vous demandera de sélectionner les plugins à ajouter à votre projet.

Pour sélectionner, utilisez la barre d'espace ou la touche A de votre clavier pour sélectionner tous les plugins.

Une fois terminé, appuyez sur Entrée pour continuer.

En fonction du plugin sélectionné, des invites supplémentaires apparaîtront, sélectionnez simplement ce que vous voulez, appuyez sur Entrée et laissez la CLI se terminer.

Une fonctionnalité intéressante de la nouvelle CLI est que la création d'un projet créera également automatiquement un nouveau référentiel sur votre ordinateur pour votre projet.

Le plugin prend en charge

1. Typescript @vue/typescript

2. Progressive Web Apps (PWA)@vue/pwa

3. Vue Router

4. Vuex

5. Préprocesseurs CSS (postcss, modules css, sass, less et stylus)

6. Linter/Formatters @vue/eslint

7. Tests unitaires @ vue / mocha ou @ vue / jest

8. Test E2E@ vue / cypressou @ vue / nightwatch

Valeur par défaut

Lorsque vous créez un nouveau projet à l'aide de la CLI et sélectionnez des fonctionnalités manuellement, un préréglage est créé.

CLI使用此创建的预设来创建项目文件。

它使用JSON编写，包含创建新应用时选择的所有功能。

预设可以重复使用，从而使您可以轻松地直接跳入应用程序，而无需在创建将来的应用程序时经历整个功能选择过程。

要使用CLI从先前保存的预设创建新项目，请将目录更改为预设的位置，然后运行以下代码

vue create -p presetname newproject

这将使用指定的预设文件来创建名为newproject的项目名称。

将CLI插件添加到现有项目

要将插件添加到已创建的项目中，只需运行以下命令

vue add @vue/pwa

其中@ vue / pwa是要添加的插件的名称，在这种情况下为Progressive Web App插件。

需要注意的一件事是，新的CLI现在接受软件包的简写名称，例如@ vue / pwa是CLI软件包@ vue / cli-plugin-pwa的简写。

CLI将名称@ vue / value解析为@ vue / cli-plugin-value以安装软件包。

Zero-config快速原型

新的CLI使得使用vue serve和vue build命令以开发或生产模式仅提供.vue或.js文件变得非常容易。

如果您只想测试自己的想法，而又不想打扰配置，那么这是完美的选择。

要使用此命令，您必须首先安装vue CLI全局服务。

为此，只需在您的终端中运行以下代码。

npm install -g @vue/cli-service-global

安装完成后，您可以使用vue serve或vue build。

服务视图

vue serve app.vue

其中app.vue是要提供服务的组件或文件的名称。

serve命令还提供了一个选项，可以在运行完命令后启动浏览器，而不仅仅是向您显示当前正在向其提供应用程序的网址。

为此，请运行vue serve -o app.vue

Vue build

vue build app.vue

其中app.vue是要提供服务的组件或文件的名称。

vue build命令将构建可用于生产环境的捆绑软件，它还允许您指定是将其构建为库还是Web组件。

要构建为库，请使用vue build -t lib app.vue，而要构建为Web组件，请使用vue build -t wc app.vue。

环境变量

新的CLI现在允许您在项目根目录中使用.env文件来使用环境变量。

该文件由键=值对组成。

每个人至少需要管理2个环境，这意味着我们需要为此环境指定变量。

为了有效地做到这一点，CLI引入了我们所说的模式。

模式只是环境的别称，它指定您是处于开发，生产还是测试模式。

创建仅由特定模式使用的变量。 您必须将模式名称作为后缀添加到.env文件名中。

.env.development用于开发模式，.env.production用于生产模式。

注意：要使CLI将变量嵌入客户端捆绑软件代码中，该变量必须以VUE_APP_名称为前缀。

现在添加变量seckey变为VUE_APP_SECKEY

调整Webpack配置

Vue CLI提供了一种非常简单灵活的方法来调整内部Webpack配置。

为此，您必须在vue.config.js中使用configureWebpack选项

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

以防万一您在项目根目录中没有vue.config.js文件。 您将必须手动创建它。

您可能想知道：“我如何知道内部Webpack配置中已经存在的内容，所以我知道需要添加什么？”

好了，这是vue inspect命令变得方便的地方。

此命令将所有内部Webpack配置输出到您的终端。

要将其输出到文件，只需指定这样的文件名

vue inspect > output.js

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

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!