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',
   };