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

Smile_frank
69 阅读7分钟

使用不同的 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',
};

习题

  1. 将 PWA 插件添加到您的项目中： 按照说明安装 @vue/cli-plugin-pwa。然后，检查 manifest.json 文件和 main.js 中的 Service Worker 注册。尝试构建您的项目并使用静态服务器为其提供服务，以查看 PWA 的运行情况。
  2. 尝试不同的 ESLint 配置： 创建一个新的 Vue 项目，并尝试安装具有不同配置预设（Airbnb、Standard、Prettier）的 ESLint 插件。观察预设之间的 linting 规则有何不同。
  3. 探索社区插件： 在 npm 上搜索满足特定需求（例如，UI 组件库、API 集成）的 Vue CLI 插件。评估它们的质量并尝试在测试项目中安装和使用它们。

总结

在本课中，你学习了 Vue CLI 插件以及它们如何扩展 Vue 项目的功能。你探索了不同类型的插件，如何安装和配置它们，以及常见的用例。你还学习了将 Vuex、TypeScript 和 ESLint 添加到现有项目的实际示例。

接下来的步骤涉及更深入地研究特定的插件及其配置选项。在下面的课程中，你将学习用于调试 Vue 应用程序的 Vue Devtools。这对于解决使用插件和复杂应用程序逻辑时可能出现的问题非常宝贵。

avatar
文章
阅读
粉丝