--- theme: jzman --- 「这是我参与2022首次更文挑战的第1天，活动详情查看：[2022首次更文挑战](https://juejin.cn/post/7052884569032392740 "https://juejin.cn/post/7052884569032392740")」。 # 前言最近鼓捣了一下 Vue3 + Vite2，遇到了不少问题，整理了5个可以提高开发效率的小知识，让你在 Vue3 的项目开发中更加丝滑、顺畅。 # 一、setup name 增强 `Vue3`的`setup`语法糖是个好东西，但使用`setup`语法带来的第一个问题就是无法自定义`name`，而我们使用`keep-alive`往往是需要`name`的，解决这个问题通常是通过写两个`script`标签来解决，一个使用`setup`，一个不使用，但这样必然是不够优雅的。 ```javascript ``` 这时候借助插件`vite-plugin-vue-setup-extend`可以让我们更优雅的解决这个问题，不用写两个`script`标签，可以直接在`script`标签上定义`name`。 ## 安装 ```javascript npm i vite-plugin-vue-setup-extend -D ``` ## 配置 ```javascript // vite.config.ts import { defineConfig } from 'vite' import VueSetupExtend from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: [ VueSetupExtend() ] }) ``` ## 使用 ```javascript ``` # 二、API 自动导入 `setup`语法让我们不用再一个一个的把变量和方法都`return`出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的`Vue`API，比如`ref`、`computed`、`watch`等，还是每次都需要我们在页面上手动进行`import`。我们可以通过`unplugin-auto-import`实现自动导入，无需`import`即可在文件里使用`Vue`的API。 ## 安装 ```javascript npm i unplugin-auto-import -D ``` ## 配置 ```javascript // vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下 dts: 'src/auto-imports.d.ts', imports: ['vue'] }) ] }) ``` 安装配置完会自动生成`auto-imports.d.ts`文件。 ```typescript // auto-imports.d.ts // Generated by 'unplugin-auto-import' // We suggest you to commit this file into source control declare global { const computed: typeof import('vue')['computed'] const createApp: typeof import('vue')['createApp'] const customRef: typeof import('vue')['customRef'] const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] const defineComponent: typeof import('vue')['defineComponent'] const effectScope: typeof import('vue')['effectScope'] const EffectScope: typeof import('vue')['EffectScope'] const getCurrentInstance: typeof import('vue')['getCurrentInstance'] const getCurrentScope: typeof import('vue')['getCurrentScope'] const h: typeof import('vue')['h'] const inject: typeof import('vue')['inject'] const isReadonly: typeof import('vue')['isReadonly'] const isRef: t ypeof import('vue')['isRef'] // ... } export {} ``` ## 使用 ```javascript ``` 上面我们在`vite.config.ts`的配置里只导入了`vue`，`imports: ['vue']`，除了`vue`的你也可以根据文档导入其他的如`vue-router`、`vue-use`等。个人建议只对一些比较熟悉的API做自动导入，如`vue`的API我们在开发时都比较熟悉，闭着眼都能写出来，对于一些不大熟悉的像`VueUse`这种库，还是使用`import`更好一些，毕竟编辑器都有提示，不易写错。 ## 解决`eslint`报错问题在没有`import`的情况下使用会导致`eslint`提示报错，通过如下步骤解决： ```javascript // vite.config.ts AutoImport({ dts: 'types/auto-imports.d.ts', imports: ['vue'], // 解决eslint报错问题 eslintrc: { enabled: true } }) ``` 这时会自动生成`.eslintrc-auto-import.json`文件，将其导入`eslintrc.js`即可。 ```js // eslintrc.js module.exports = { extends: [ './.eslintrc-auto-import.json' ] } ``` # 三、告别.value 众所周知，`ref`要求我们访问变量时需要加上`.value`，这让很多开发者觉得难受. ```javascript let count = ref(1) const addCount = () => { count.value += 1 } ``` 后来尤大大也提交了一份新的`ref`语法糖提案。 ```javascript ref: count = 1 const addCount = () => { count += 1 } ``` 该提案一出便引起了社区的一片讨论，时间已经过去很久了，这里就不再废话这个话题了。这里我介绍的是另外一种写法，也是官方后来出的一种方案，在`ref`前加上`$`，该功能默认关闭，需要手动开启。 ```javascript // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue({ refTransform: true // 开启ref转换 }) ] }) ``` 开启之后可以这样写： ```javascript let count = $ref(1) const addCount = () => { count++ } ``` 该语法糖根据不同的版本配置也略有不同，下面贴一下我自己所用相关插件的版本： ``` "vue": "^3.2.2", "@vitejs/plugin-vue": "^1.9.0", "@vue/compiler-sfc": "^3.2.5", "vite": "^2.6.13" ``` > 该属性仍处于实验性阶段，谨慎使用！！！ # 四、自动导入图片在`Vue2`时我们经常会这样引用图片： ```html ``` 但在`Vite`中不支持`require`了，引用图片变成了下面这样： ```javascript ``` 每次使用图片都得`import`，显然耽误了大家摸鱼的时间，这时我们可以借助`vite-plugin-vue-images`来实现自动导入图片。 >爽归爽，但容易发生变量冲突，慎用！ ## 安装 ```javascript npm i vite-plugin-vue-images -D ``` ## 配置 ```javascript // vite.config.ts import { defineConfig } from 'vite' import ViteImages from 'vite-plugin-vue-images' export default defineConfig({ plugins: [ ViteImages({ dirs: ['src/assets/image'] // 指明图片存放目录 }) ] }) ``` ## 使用 ```javascript ``` # 五、忽略.vue后缀相信很多人在`Vue2`开发时，导入文件都是忽略.vue后缀的。但在`Vite`里，忽略.vue后缀会引起报错。 ```javascript import Home from '@/views/home' // error import Home from '@/views/home.vue' // ok ``` 根据尤大大的回答，必须写后缀其实是故意这么设计的，也就是提倡大家这么去写。但如果你真的不想写，官方也是提供了支持的。 ```javascript // vite.config.ts import { defineConfig } from 'vite' export default defineConfig({ resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] } }) ``` 这里要注意，手动配置`extensions`要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。 >虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。 # 感谢本次分享到这里就结束了，**感谢您的阅读**！予人玫瑰，手有余香，别忘了动动手指**点个赞**❤️。本文如果有什么错误或不足，也欢迎评论区指正！