Ein tiefer Einblick in Vue CLI3

Vue CLI ist ein einfaches und leistungsstarkes Tool zum Erstellen von Vue.js-Projekten. Es stellt sicher, dass verschiedene Build-Tools mit sinnvollen Standardeinstellungen reibungslos funktionieren, sodass Sie sich auf das Schreiben Ihrer Anwendung konzentrieren können, anstatt sich mit der Konfiguration herumzuschlagen.

Vue CLI 3 ist das Beste, was bisher im Vue-Ökosystem passiert ist, und hier sind die Gründe:

1. Plugin-basierte Architektur

Die neue CLI implementiert das, was wir eine Plugin-basierte Architektur nennen , was eine deutliche Verbesserung gegenüber früheren Versionen darstellt, die eine vorlagenbasierte Architektur verwendeten.

Das bedeutet, dass es jetzt nur noch eine Vorlage gibt und alle anderen Funktionen, die Sie benötigen, als Plugins hinzugefügt werden.

2. Flexibilität

Mit der neuen CLI können Sie ganz einfach ein neues Projekt starten, ohne über alle Funktionen nachdenken zu müssen, die Sie möglicherweise in Zukunft benötigen.

Sie können Ihr Projekt erstellen, direkt programmieren und dann, wenn Sie Funktionalität benötigen, diese einfach hinzufügen!

3. Zero-Config Rapid Prototyping

Auf diese Weise können Sie Vue-Anwendungen oder -Komponenten genau wie die Verarbeitung von HTML-Dateien bereitstellen.

4, Vuex

Mit der neuen CLI können Sie Vuex zu Ihrem Projekt hinzufügen, genau wie Sie in früheren Versionen einen Vue-Router hinzugefügt haben. 5. Typescript Erstellen Sie Ihre eigenen benutzerdefinierten Plugins (und veröffentlichen Sie Ihre Plugins natürlich, damit andere sie verwenden können).

Installieren Sie Vue CLI 3

Um die CLI zu installieren, führen Sie den folgenden Code aus.

npm install -g @vue/cli

Dadurch wird die neueste Version von Vue CLI installiert. Sobald Sie fertig sind, können Sie die installierte Version bestätigen, indem Sie den folgenden Befehl ausführen:

vue -V

Geänderte CLI-Befehle

Die CLI-Befehle haben sich im Vergleich zu früheren Versionen leicht geändert und dem Goodies-Paket wurden neue Befehle hinzugefügt. vue create myprojectErstellen Sie ein neues Projekt mit dem Namen myproject.

vue server 2334ac29606bf8a170583e4f7533b1f4Stellt eine .js- oder .vue-Datei im Entwicklungsmodus ohne Konfiguration bereit.

vue build 2334ac29606bf8a170583e4f7533b1f4 Erstellen Sie produktionsbereite Bundles aus .js- oder .vue-Dateien ohne Konfiguration.

vue invoke b108d3c63ecc7cd3decca5e90ebe558f Ruft den installierten Plugin-Generator auf, um die Dateien zu erstellen, die für die ordnungsgemäße Funktion des Plugins erforderlich sind.

• vue inspect zeigt die Webpack-Konfiguration der Anwendung an, da sie vollständig abstrahiert wurde. vue create myproject创建一个名为myproject的新项目。

• vue serve 479d34ed3e826e8b14bd2c55e47269c5以零配置在开发模式下提供.js或.vue文件。

• vue build 479d34ed3e826e8b14bd2c55e47269c5使用零配置从.js或.vue文件构建生产就绪的捆绑包。

• vue invoke b108d3c63ecc7cd3decca5e90ebe558f调用已安装的插件生成器以创建插件正常工作所需的文件。

• vue inspect会显示应用程序的webpack配置，因为它已被完全抽象。

• Vue init是为仍希望使用旧版本2的用户保留的，但要使用此命令，您必须安装一个全局网桥

为此，请在终端中运行以下代码。

npm install -g @vue/cli-init

安装完成后。 现在，您随时可以在版本3中直接开始使用版本2。

vue init webpack newapp

创建一个新项目

要创建一个新项目，请在您的终端中运行以下代码

vue create projectname

其中projectname是要创建的应用程序的名称。

系统将提示您选择一个预设，默认预设（包含babel＆eslint配置）或手动选择所需的功能。

如果选择默认预设，则CLI将创建您的项目并安装必要的插件以使其启动并运行。

如果您选择手动选择功能，则CLI会继续向您显示所有受支持的插件，并要求您选择要添加到项目中的插件。

若要选择，请使用键盘上的空格键或A键选择所有插件。

完成后，按Enter键继续。

根据选择的插件的不同，还会显示其他提示，只需选择所需的内容，然后按Enter键，然后让CLI完成即可。

新的CLI的一项很酷的功能是，创建的项目还会自动在计算机上为您的项目创建一个新的存储库。

插件支持开箱即用

1. Typescript @vue/typescript

2. 渐进式Web应用程序（PWA）@vue/pwa

3. Vue Router

4. Vuex

5. CSS预处理器（postcss，css模块，sass，less和stylus）

6. Linter / Formatters @vue/eslint

7. 单元测试 @ vue / mocha或@ vue / jest

8. E2E测试@ vue / cypress或@ vue / nightwatch

Vue init ist für Benutzer reserviert, die noch die alte Version 2 verwenden möchten, aber um diesen Befehl verwenden zu können, müssen Sie eine globale Bridge installieren

Dazu führen Sie bitte die aus folgenden Code im Terminal ein.

vue create -p presetname newproject

Nachdem die Installation abgeschlossen ist. Sie können Version 2 nun jederzeit direkt in Version 3 nutzen.

vue add @vue/pwa

🎜 Erstellen Sie ein neues Projekt 🎜🎜🎜🎜 Um ein neues Projekt zu erstellen, führen Sie den folgenden Code in Ihrem Terminal aus 🎜

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

🎜 wobei Projektname der Name der Anwendung ist, die Sie erstellen möchten. 🎜🎜Sie werden aufgefordert, eine Voreinstellung, die Standardvoreinstellung (mit der babel & eslint-Konfiguration) auszuwählen oder die erforderlichen Funktionen manuell auszuwählen. 🎜🎜Wenn Sie die Standardvoreinstellung auswählen, erstellt die CLI Ihr Projekt und installiert die erforderlichen Plugins, um es zum Laufen zu bringen. 🎜🎜Wenn Sie sich für die manuelle Auswahl von Funktionen entscheiden, zeigt Ihnen die CLI weiterhin alle unterstützten Plugins an und fordert Sie auf, diejenigen auszuwählen, die Sie Ihrem Projekt hinzufügen möchten. 🎜🎜Zum Auswählen verwenden Sie die Leertaste oder die A-Taste auf Ihrer Tastatur, um alle Plugins auszuwählen. 🎜🎜Wenn Sie fertig sind, drücken Sie die Eingabetaste, um fortzufahren. 🎜🎜Je nach ausgewähltem Plugin werden zusätzliche Eingabeaufforderungen angezeigt. Wählen Sie einfach aus, was Sie möchten, drücken Sie die Eingabetaste und lassen Sie die CLI fertig werden. 🎜🎜Eine coole Funktion der neuen CLI ist, dass beim Erstellen eines Projekts auch automatisch ein neues Repository für Ihr Projekt auf Ihrem Computer erstellt wird. 🎜🎜🎜🎜Plugin unterstützt sofort einsatzbereites 🎜🎜🎜

🎜🎜Typescript @vue/typescript🎜🎜🎜🎜Progressive Web Apps Program (PWA) @vue/pwa🎜🎜🎜🎜Vue Router🎜🎜🎜🎜Vuex🎜🎜🎜🎜CSS-Präprozessor (PostCSS, CSS-Module, Sass, Less und Stylus) 🎜🎜🎜🎜 Linter / Formatter @vue/eslint🎜🎜🎜🎜Unit Testing @vue/mocha oder @vue/jest🎜🎜🎜🎜E2E Testing@vue/cypress oder @vue/nightwatch 🎜🎜🎜🎜🎜🎜Voreinstellungen 🎜🎜🎜🎜 Wenn Sie ein neues Projekt mit der CLI erstellen und Funktionen manuell auswählen, wird ein Standardwert verwendet. 🎜

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视频教程精选

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

Das obige ist der detaillierte Inhalt vonEin tiefer Einblick in Vue CLI3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!