这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言
最近鼓捣了一下 Vue3 + Vite2，遇到了不少问题，整理了5个可以提高开发效率的小知识，让你在 Vue3 的项目开发中更加丝滑、顺畅。
一、setup name 增强
Vue3
的
setup
语法糖是个好东西，但使用
setup
语法带来的第一个问题就是无法自定义
name
，而我们使用
keep-alive
往往是需要
name
的，解决这个问题通常是通过写两个
script
标签来解决，一个使用
setup
，一个不使用，但这样必然是不够优雅的。
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
name: 'OrderList'
})
</script>
<script lang="ts" setup>
onMounted(() => {
console.log('mounted===')
})
</script>
这时候借助插件
vite-plugin-vue-setup-extend
可以让我们更优雅的解决这个问题，不用写两个
script
标签，可以直接在
script
标签上定义
name
。
安装
npm i vite-plugin-vue-setup-extend -D
配置
// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [
VueSetupExtend()
]
})
使用
<script lang="ts" setup name="OrderList">
import { onMounted } from 'vue'
onMounted(() => {
console.log('mounted===')
})
</script>
二、API 自动导入
setup
语法让我们不用再一个一个的把变量和方法都
return
出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的
Vue
API，比如
ref
、
computed
、
watch
等，还是每次都需要我们在页面上手动进行
import
。
我们可以通过
unplugin-auto-import
实现自动导入，无需
import
即可在文件里使用
Vue
的API。
安装
npm i unplugin-auto-import -D
配置
// 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
文件。
// 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 {}
使用
<script lang="ts" setup name="OrderList">
// 不用import，直接使用ref
const count = ref(0)
onMounted(() => {
console.log('mounted===')
})
</script>
上面我们在
vite.config.ts
的配置里只导入了
vue
，
imports: ['vue']
，除了
vue
的你也可以根据文档导入其他的如
vue-router
、
vue-use
等。
个人建议只对一些比较熟悉的API做自动导入，如
vue
的API我们在开发时都比较熟悉，闭着眼都能写出来，对于一些不大熟悉的像
VueUse
这种库，还是使用
import
更好一些，毕竟编辑器都有提示，不易写错。
解决
eslint
报错问题
eslint
在没有
import
的情况下使用会导致
eslint
提示报错，通过如下步骤解决：
// vite.config.ts
AutoImport({
dts: 'types/auto-imports.d.ts',
imports: ['vue'],
// 解决eslint报错问题
eslintrc: {
enabled: true
}
})
这时会自动生成
.eslintrc-auto-import.json
文件，将其导入
eslintrc.js
即可。
// eslintrc.js
module.exports = {
extends: [
'./.eslintrc-auto-import.json'
]
}
三、告别.value
众所周知，
ref
要求我们访问变量时需要加上
.value
，这让很多开发者觉得难受.
let count = ref(1)
const addCount = () => {
count.value += 1
}
后来尤大大也提交了一份新的
ref
语法糖提案。
ref: count = 1
const addCount = () => {
count += 1
}
该提案一出便引起了社区的一片讨论，时间已经过去很久了，这里就不再废话这个话题了。
这里我介绍的是另外一种写法，也是官方后来出的一种方案，在
ref
前加上
$
，该功能默认关闭，需要手动开启。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
refTransform: true // 开启ref转换
})
]
})
开启之后可以这样写：
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
时我们经常会这样引用图片：
<img :src="require('@/assets/image/logo.png')" />
但在
Vite
中不支持
require
了，引用图片变成了下面这样：
<template>
<img :src="Logo" />
</template>
<script lang="ts" setup>
import Logo from '@/assets/image/logo.png'
</script>
每次使用图片都得
import
，显然耽误了大家摸鱼的时间，这时我们可以借助
vite-plugin-vue-images
来实现自动导入图片。
爽归爽，但容易发生变量冲突，慎用！
安装
npm i vite-plugin-vue-images -D
配置
// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
plugins: [
ViteImages({
dirs: ['src/assets/image'] // 指明图片存放目录
})
]
})
使用
<template>
<!-- 直接使用 -->
<img :src="Logo" />
</template>
<script lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>
五、忽略.vue后缀
相信很多人在
Vue2
开发时，导入文件都是忽略.vue后缀的。但在
Vite
里，忽略.vue后缀会引起报错。
import Home from '@/views/home' // error
import Home from '@/views/home.vue' // ok
根据尤大大的回答，必须写后缀其实是故意这么设计的，也就是提倡大家这么去写。
但如果你真的不想写，官方也是提供了支持的。
// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
})
