Vue3 中的插件和配置推荐大全实用指南

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“Vue3 中的插件和配置推荐大全”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

从实现思路看，小伙伴们知道 TienChin 项目前端用的是 Vue3，当我们把 Vue3 官网刷了一遍之后回来看 TienChin 项目的前端，发现还是有很多不太一样的地方，今天松哥就来和大家捋一捋 Vue3 中几个好玩的插件和设置，学完之后，相信大家对 TienChin 项目前端的很多写法就明白了。

1. Vite

实际处理时，首先来给大家介绍一下 Vite，虽然这在 Vue3 中同时不是必须的，但是考虑到 TienChin 项目前端用了这个，还是给大家稍微说两句。

结合项目来看，Vite（法语意为 "更快的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 从实现思路看，一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 落到代码里，一套构建指令，它采用 Rollup 打包你的代码，同时且它是预设置的，可输出用来生产环境的高度优化过的静态资源。

结合项目来看，Vite 意在提供开箱即用的设置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，同时有完整的类型兼容。

从实现思路看，若小伙伴们绝得陌生，那么不妨回忆下我们之前在 vhr 中给大家介绍的 Webpack，其实这个 Vite 相当于就是 Webpack。相比于 Webpack 的传统工具，Vite 最大的特点就是快。

落到代码里，Vite 借助在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间，因为依赖变化小而源码才是经常会变的东西。

实际处理时，不知道小伙伴们看到这里有没有想到我们 Java 中也有一个类似的玩意，那就是 Spring Boot 热加载。

落到代码里，Spring Boot 的热加载中用到了两个类加载器：一个是 base classloader，专门用来加载一些第三方的类；还有一个是 restart classloader，专门用来加载我们自己写的类。热加载的时候，只需 restart classloader 工作即可。

理解这一步时，好了，对于我们 Java 工程师来说，大家知道 Vite 是一个项目构建工具就能够了，下面的例子我要借助 Vite 来和大家演示。

2. 自动导入常用方法

从实现思路看，在 TienChin 项目里，小伙伴们看到，很多原本需导入之后才能用的方法，竟然都不需导入就能够采用。

我新建一个项目来给大家演示看下。

我们用 Vite 来构建一个项目。

落到代码里，若你的 npm 版本是 6.x，那么执行如下所示命令新建一个 Vue3 工程：

npm create vite@latest my-vue-app --template vue

实际处理时，若你的 npm 版本是 7+，那么执行如下所示命令新建一个 Vue3 工程：

npm create vite@latest my-vue-app -- --template vue

实际处理时，这个 Vue 工程新建成功之后，没有 router 啥的，需我们自己安装上，这个常规操作我就不多说了。

2.1 传统写法

结合项目来看，现在我举一个轻松的例子，例如在 MyVue01 这个页面上有一个按钮，点击之后，能够跳转到 MyVue02 这个页面，那么我们的点击事件能够按照如下所示的方式来写：

结合项目来看，首先我们需从 vue-router 中导入 useRouter 函数，随后调用该函数能够拿到到 router 对象，再调用 router 中的 push 方法就能够完成页面跳转了。

理解这一步时，以前在 Vue2 中，我们一般都是借助 this.$router 来拿到到 router 对象，随后借助 router 对象来实现页面导航操作。但是在 Vue3 中，没有 this 了，不过 Vue3 中提供了一个 getCurrentInstance 方法来拿到当前 Vue 实例，所以页面跳转，我们也能够按照下面这种方式来写：

这里的 proxy 就类似于以前 Vue2 中的 this。

从实现思路看，松哥这里是以 router 为例来和大家演示，如果是 Vuex/Pinia，也有类似的写法，我就不挨个演示了。

落到代码里，无论是上面那种写法，都需首先导入一个函数，随后才能开始采用。然而我们在 TienChin 项目的前端代码中，虽然也有导入，但是像上面这两个例子中导入都是没有的，那是怎么回事？

这就借助于一个自动导入的工具了。

2.2 自动导入

在这个场景下，前端有一个工具插件叫做 unplugin-auto-import，借助这个插件能够完成一些方法的自动导入。该方法的采用步骤如下所示：

(1) 安装插件：

npm i unplugin-auto-import -D

结合项目来看，由于这个插件只是一个开发辅助工具而已，所以安装的时候加上 -D 参数，这样就会安装到 devDependencies 中了。

(2) 设置插件：

落到代码里，插件的设置是在项目根目录下的 vite.config.js 文件中进行设置的，内容如下所示：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), AutoImport({
        // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })]
})

在这个场景下，小伙伴们注意注释掉的代码，这个插件设置好之后，启动项目，默认会在 node_modules/unplugin-auto-import/auto-imports.d.ts 位置生成一个文件，但是设置 dts 属性能够修改这个文件生成的位置。

在这个场景下，imports 则是指需自动导入的方法都是哪里的方法，以我们前下文的两个案例为例，useRouter 是 vue-router 中的方法，getCurrentInstance 方法则是 vue 中的，所以这里导入我选择了 vue 和 vue-router，当然，小伙伴们在开发中，如果有需，也能够导入 Vuex/Pinia 等。

结合项目来看，设置好了插件之后，我们当我们再次需采用上面那些方法的时候，就不需导入了，直接用即可：

useRouter 也不需导入了。

结合项目来看，以后，凡是 vue 和 vue-router 中的方法都是不需导入就能够采用了，其他组件中的方法则还是跟以前一样，必须导入之后才能够采用。

3. 组件去后缀

结合项目来看，以前在 Vue2 中，我们导入组件的时候，可能都习惯省略 .vue 后缀，毕竟用 WebStorm 开发的时候，系统自动导入的时候也会帮我们省略掉这个后缀，写法类似下面这样：

import MyVue01 from "../views/MyVue01";
import MyVue02 from "../views/MyVue02";

但是现在在 Vite 中，如果还是这样写就会报错，类似下面这样：

落到代码里，现在必须要写后缀了，但是有的人就是不习惯写后缀，那怎么办？我们能够在 vite.config.js 中添加如下所示设置，这样就能够不用写 .vue、.js 等后缀了。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), AutoImport({
        // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })],
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

落到代码里，好了，现在大家明白了为什么 TienChin 项目前端都不写 .vue 了吧。

4. name 属性问题

从实现思路看，以前在 Vue2 中，我们能够借助如下所示方式给一个 Vue 组件设置名称：

从实现思路看，在 Vue3 里，我们如果将 setup 写到 script 节点中的话，就没法定义 name 了，如果还需采用 name 属性的话，那么能够再定义一个 script 节点，专门用来设置 name 属性，如下所示：

提示，我们在调试页面中，就能够看到自定义的组件名了：

不过这种写法多多少还是有点费事。

落到代码里，借助 vite-plugin-vue-setup-extend 插件能够简化在 Vue3 中设置 name 属性，安装该插件之后，我们就能够直接在 script 节点中定义 name 属性的值了，安装方式如下所示：

npm install vite-plugin-vue-setup-extend -D

装好之后，在 vite.config.js 中再进行设置一下，如下所示：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
            // dts: 'src/auto-imports.d.ts',
            imports: ['vue', 'vue-router']
        }),
        VueSetupExtend()
    ],
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

从实现思路看，VueSetupExtend 就是 vite-plugin-vue-setup-extend 插件的设置。

设置完成后，我们就能够借助如下所示方式来定义 name 属性了：

到此这篇关于Vue3 中的插件和设置建议大全的文章就介绍到这了,更多相关Vue3插件和设置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！