A Deep Dive into Vue CLI3

Vue CLI is a simple and powerful tool for building Vue.js projects. It ensures that various build tools run smoothly with sensible default settings, so you can focus on writing your application rather than spending time fighting with configuration.

Vue CLI 3 is the best thing to happen in the Vue ecosystem so far, and here are the reasons:

1. Plugin-based architecture

The new CLI implements what we call a plugin-based architecture, which is a significant improvement over previous versions that used a template-based architecture.

This means that now there is only one template and all the other features you need will be added as plugins.

2. Flexibility

The new CLI makes it super easy to start a new project without having to think about all the features you may need in the future.

You can create a project, code directly, and then when you need functionality, just add it!

3. Zero-config rapid prototyping

In this way, you can provide vue applications or components just like processing html files.

4, Vuex

The new CLI allows you to add Vuex to your project just like you added Vue Router in previous versions.

5. Typescript

The official cli now supports booting typescript vue.js applications

6. Custom plug-in

If the CLI official plug-in is not complete enough, you can create your own custom plug-in (of course, you can also publish your plug-in so that others can use them).

Install Vue CLI 3

To install the CLI, run the following code.

npm install -g @vue/cli

This will install the latest version of Vue CLI. Once completed, you can confirm the installed version by running the following command:

vue -V

Change CLI Command

Compared to the previous version, The CLI commands have changed slightly, and new commands have been added to the goodies pack.

• vue create myprojectCreate a new project named myproject.

• vue serve 2334ac29606bf8a170583e4f7533b1f4Serves a .js or .vue file in development mode with zero configuration.

• vue build 2334ac29606bf8a170583e4f7533b1f4 Build a production-ready bundle from a .js or .vue file with zero configuration.

• vue invoke b108d3c63ecc7cd3decca5e90ebe558fInvoke the installed plugin generator to create the files required for the plugin to work properly.

• vue inspect will display the application's webpack configuration because it has been completely abstracted.

• Vue init is reserved for users who still want to use the older version 2, but to use this command you must install a global bridge

To do this, run the following code in the terminal.

npm install -g @vue/cli-init

After the installation is completed. You can now start using version 2 directly within version 3 at any time.

vue init webpack newapp

Create a new project

To create a new project, run the following code in your terminal

vue create projectname

Where projectname is the name of the application to be created.

You will be prompted to select a preset, the default preset (containing babel & eslint configuration) or manually select the required features.

If you select the default preset, the CLI will create your project and install the necessary plugins to get it up and running.

If you choose to manually select features, the CLI will continue to show you all supported plugins and ask you to select which plugins to add to your project.

To select, use the spacebar or A key on your keyboard to select all plugins.

When finished, press Enter to continue.

Depending on the plugin selected, additional prompts will appear, just select what you want, press Enter, and let the CLI finish.

One cool feature of the new CLI is that creating a project also automatically creates a new repository for your project on your computer.

Plug-in support out of the box

1. Typescript @vue/typescript

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

3. Vue Router

4. Vuex

5. CSS preprocessors (postcss, css modules, sass, less and stylus)

6. Linter/Formatters @vue/eslint

7. Unit test @ vue/mocha or @ vue/jest

8. E2E test@ vue / cypress or @ vue / nightwatch

##Default value

When you create a new project using the CLI and select features manually, a preset is created.

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

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

The above is the detailed content of A Deep Dive into Vue CLI3. For more information, please follow other related articles on the PHP Chinese website!