使用不同的 Vue CLI 插件
Vue CLI 插件扩展了 Vue 项目的功能，让你可以轻松集成 TypeScript、Vuex、路由等功能。它们可以自动进行配置和设置，从而节省您的时间和精力。了解如何使用这些插件对于高效的 Vue 开发至关重要。
了解 Vue CLI 插件
Vue CLI 插件本质上是扩展 Vue CLI 功能的 npm 包。它们为常见任务和集成提供预配置的设置，例如添加 linter、设置测试环境或与后端服务集成。插件可以修改你的项目文件，安装依赖项，并向 Vue CLI 添加新命令。
插件类型
Vue CLI 插件主要有两大类：
- 官方插件： 这些由 Vue.js 核心团队维护，通常被认为是最稳定和可靠的。示例包括
@vue/cli-plugin-babel、@vue/cli-plugin-eslint、@vue/cli-plugin-router、@vue/cli-plugin-vuex和@vue/cli-plugin-typescript。 - 社区插件： 这些是由 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 进行状态管理。
-
安装 Vuex 插件：
vue add @vue/cli-plugin-vuex -
回答提示： CLI 将询问您是否要创建新商店。回答是。
-
检查更改： 该插件将：
- 将
vuex添加为package.json文件中的依赖项。 - 使用基本的 Vuex store 设置创建一个
src/store/index.js文件。 - 在
src/main.js文件中导入并使用 store。
- 将
-
在你的组件中使用 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 支持。
-
安装 TypeScript 插件：
vue add @vue/cli-plugin-typescript -
**回答提示：**CLI 将询问您是否要使用类样式的组件。现在选择 “no” 以保持简单。
-
检查更改： 该插件将：
- 将
typescript、ts-loader和其他相关依赖项添加到您的package.json文件中。 - 使用 TypeScript 编译器选项创建
tsconfig.json文件。 - 将
main.js文件重命名为main.ts。 - 更新您的 webpack 配置以处理
.ts和.tsx文件。
- 将
-
将组件转换为 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 添加到现有项目中。
-
安装 ESLint 插件：
vue add @vue/cli-plugin-eslint -
回答提示： 选择您喜欢的 linting 样式（例如，Airbnb、Standard 或 Prettier）。选择保存时 linting。
-
安装 Prettier： 如果你没有在 ESLint 设置中选择它，你可以单独添加它。通常，这涉及安装
eslint-plugin-prettier和eslint-config-prettier。具体步骤取决于你的 ESLint 配置。 -
配置 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', };
