Vue-02 （使用不同的 Vue CLI 插件）

使用不同的 Vue CLI 插件

Vue CLI 插件扩展了 Vue 项目的功能，让你可以轻松集成 TypeScript、Vuex、路由等功能。它们可以自动进行配置和设置，从而节省您的时间和精力。了解如何使用这些插件对于高效的 Vue 开发至关重要。

了解 Vue CLI 插件

Vue CLI 插件本质上是扩展 Vue CLI 功能的 npm 包。它们为常见任务和集成提供预配置的设置，例如添加 linter、设置测试环境或与后端服务集成。插件可以修改你的项目文件，安装依赖项，并向 Vue CLI 添加新命令。

插件类型

Vue CLI 插件主要有两大类：

1. 官方插件： 这些由 Vue.js 核心团队维护，通常被认为是最稳定和可靠的。示例包括 @vue/cli-plugin-babel、@vue/cli-plugin-eslint、@vue/cli-plugin-router、@vue/cli-plugin-vuex 和 @vue/cli-plugin-typescript。
2. 社区插件： 这些是由 Vue.js 社区创建和维护的。它们可以为各种使用案例提供功能，但在使用它们之前评估其质量和可维护性非常重要。

插件的工作原理

插件通过挂接到 Vue CLI 的构建过程并修改项目的配置来工作。他们可以：

• 将依赖项添加到您的 package.json 文件中。
• 修改 vue.config.js 文件（如果不存在，请创建一个文件）。
• 在项目中添加或修改源文件。
• 使用 Vue CLI 注册新命令。

安装和使用插件

插件通常使用 Vue CLI 的 vue add 命令进行安装。此命令会自动从 npm 下载插件并运行其安装脚本，从而配置您的项目。

安装官方插件

要安装官方插件，请使用以下命令：

vue add <plugin-name>

例如，要添加 Vue Router 插件：

vue add @vue/cli-plugin-router

然后，CLI 将提示您使用特定于插件的选项。对于路由器，它可能会询问您是否要使用历史模式。

安装 Community 插件

安装社区插件与安装官方插件相同：

vue add <plugin-name>

例如，要添加一个名为 vue-cli-plugin-my-component-library 的假设社区插件 ：

vue add vue-cli-plugin-my-component-library

社区插件的重要注意事项：

• 信任： 确保插件来自信誉良好的来源。检查 npm 包的作者、下载和 GitHub 存储库（如果可用）。
• 维护： 验证插件是否得到积极维护。查看 GitHub 存储库上的上次提交日期和未解决的问题数。
• 文档： 良好的文档至关重要。文档齐全的插件更易于使用和故障排除。
• 依赖： 注意插件的依赖项。确保它们与您的项目兼容，并且不会引入任何安全漏洞。

插件选项和配置

许多插件都提供了允许您自定义其行为的配置选项。这些选项可以在安装过程中指定，也可以稍后在 vue.config.js 文件中进行修改。

示例：配置 ESLint 插件

安装 @vue/cli-plugin-eslint 插件时，系统可能会提示您选择 ESLint 配置预设（例如，Airbnb、Standard 或 Prettier）。您还可以直接在 .eslintrc.js 文件中配置 ESLint 规则。

// .eslintrc.js
module.exports = {root: true,env: {node: true,},'extends': ['plugin:vue/essential','eslint:recommended'],rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','semi': ['error', 'always'], // Enforce semicolons'quotes': ['error', 'single'], // Enforce single quotes},parserOptions: {parser: 'babel-eslint',},
}

示例：配置 TypeScript 插件

安装 @vue/cli-plugin-typescript 插件时，您可以在 tsconfig.json 文件中配置 TypeScript 选项。

// tsconfig.json
{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","moduleResolution": "node","esModuleInterop": true,"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude": ["node_modules"]
}

更新插件

要更新插件，你可以使用 vue upgrade 命令：

vue upgrade @vue/cli-plugin-<plugin-name>

此命令会将插件更新到最新版本并运行任何必要的迁移脚本。最好让您的插件保持最新状态，以便从错误修复、性能改进和新功能中受益。

常见的 Vue CLI 插件及其用例

以下是一些最常用的 Vue CLI 插件及其用例：

• @vue/cli-plugin-babel ： 将现代 JavaScript （ES6+） 转译为与旧浏览器兼容的旧版本。这几乎总是被使用。
• @vue/cli-plugin-eslint ： 对你的 JavaScript 和 Vue 代码进行 lint 检查以强制执行代码风格并防止错误。帮助保持代码质量和一致性。
• @vue/cli-plugin-typescript ： 为您的项目添加 TypeScript 支持。提供静态类型和改进的代码可维护性。
• @vue/cli-plugin-router ： 设置 Vue 路由器来处理应用程序中的导航。对于具有多个视图的单页应用程序至关重要。
• @vue/cli-plugin-vuex ： 集成 Vuex 以进行集中式状态管理。用于管理复杂的应用程序状态。
• @vue/cli-plugin-pwa ： 将您的 Vue 应用程序转换为渐进式 Web 应用程序 （PWA）。允许用户在他们的设备上安装您的应用程序并离线使用。
• @vue/cli-plugin-unit-jest ： 设置 Jest 以对您的组件进行单元测试。
• @vue/cli-plugin-e2e-cypress ： 设置 Cypress 以端到端测试您的应用程序。

实际示例和演示

让我们来看看一些使用 Vue CLI 插件的实际示例。

示例 1：将 Vuex 添加到现有项目

假设你有一个在上一课中创建的 Vue 项目，现在你想添加 Vuex 进行状态管理。

1. 安装 Vuex 插件：

   vue add @vue/cli-plugin-vuex
   

2. 回答提示： CLI 将询问您是否要创建新商店。回答是。

3. 检查更改： 该插件将：

   • 将 vuex 添加为 package.json 文件中的依赖项。
   • 使用基本的 Vuex store 设置创建一个 src/store/index.js 文件。
   • 在 src/main.js 文件中导入并使用 store。

4. 在你的组件中使用 Vuex：

   <template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
   </template><script>
   import { mapState, mapMutations } from 'vuex';export default {computed: {...mapState(['count'])},methods: {...mapMutations(['increment'])}
   };
   </script>
   

   在 src/store/index.js 中：

   import Vue from 'vue'
   import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {},modules: {}
   })
   

示例 2：将 TypeScript 添加到现有项目

假设你想在现有的 Vue 项目中添加 TypeScript 支持。

1. 安装 TypeScript 插件：

   vue add @vue/cli-plugin-typescript
   

2. **回答提示：**CLI 将询问您是否要使用类样式的组件。现在选择 “no” 以保持简单。

3. 检查更改： 该插件将：

   • 将 typescript、ts-loader 和其他相关依赖项添加到您的 package.json 文件中。
   • 使用 TypeScript 编译器选项创建 tsconfig.json 文件。
   • 将 main.js 文件重命名为 main.ts。
   • 更新您的 webpack 配置以处理 .ts 和 .tsx 文件。

4. 将组件转换为 TypeScript：

   <template><div><p>Message: {{ message }}</p></div>
   </template><script lang="ts">
   import { defineComponent } from '@vue/composition-api';export default defineComponent({data() {return {message: 'Hello, TypeScript!'};}
   });
   </script>
   

示例 3：添加 Linter/Formatter

让我们将 eslint 和 prettier 添加到现有项目中。

1. 安装 ESLint 插件：

   vue add @vue/cli-plugin-eslint
   

2. 回答提示： 选择您喜欢的 linting 样式（例如，Airbnb、Standard 或 Prettier）。选择保存时 linting。

3. 安装 Prettier： 如果你没有在 ESLint 设置中选择它，你可以单独添加它。通常，这涉及安装 eslint-plugin-prettier 和 eslint-config-prettier。具体步骤取决于你的 ESLint 配置。

4. 配置 ESLint 和 Prettier： 修改 .eslintrc.js 和 .prettierrc.js 文件以自定义 linting 和格式设置规则。

   // .eslintrc.js
   module.exports = {root: true,env: {node: true,},'extends': ['plugin:vue/essential','eslint:recommended','plugin:prettier/recommended' // Add this line],rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','semi': ['error', 'always'],'quotes': ['error', 'single'],},parserOptions: {parser: 'babel-eslint',},
   }
   

   // .prettierrc.js
   module.exports = {semi: true,singleQuote: true,trailingComma: 'es5',
   };