Vue3中5个可以提高开发效率的小知识【整理分享】

苏承栈

2026-10-21 • 👁 0人浏览过

本篇文章给大家聊聊 vue3 开发，整理分享5个可以提高开发效率的小知识，让你在 vue3 的项目开发中更加丝滑，希望对大家有所帮助！最近鼓捣了一下 Vue3 + Vite2，遇到了不少问题，整理了5个可以提高开发效率的小知识，让你在 Vue3 的项目开发中更加丝滑、顺畅。一、setup name 增强

Vue3

的

setup

语法糖是个好东西，但使用

setup

语法带来的第一个问题就是无法自定义

name

，而我们使用

keep-alive

往往是需要

name

的，解决这个问题通常是通过写两个

script

标签来解决，一个使用

setup

，一个不使用，但这样必然是不够优雅的。

这时候借助插件

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()
  ]
})

使用

二、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({
      // 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: typeof import('vue')['isRef']
  // ...
}
export {}

使用

上面我们在

vite.config.ts

的配置里只导入了

vue

，

imports: ['vue']

，除了

vue

的你也可以根据文档导入其他的如

vue-router

、

vue-use

等。个人建议只对一些比较熟悉的API做自动导入，如

vue

的API我们在开发时都比较熟悉，闭着眼都能写出来，对于一些不大熟悉的像

VueUse

这种库，还是使用

import

更好一些，毕竟编辑器都有提示，不易写错。解决

eslint

报错问题在没有

import

的情况下使用会导致

eslint

提示报错，可以通过在

eslintrc.js

安装插件

**vue-global-api**

解决。

// 安装依赖
npm i vue-global-api -D

// eslintrc.js
module.exports = {
  extends: [
    'vue-global-api'
  ]
}

三、告别.value 众所周知，

ref

要求我们访问变量时需要加上

.value

，这让很多开发者觉得难受. 综合实战（Vue3+Laravel8+Uniapp）课件综合实战（Vue3+Laravel8+Uniapp）课件下载

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

时我们经常会这样引用图片：

但在

Vite

中不支持

require

了，引用图片变成了下面这样：

每次使用图片都得

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'] // 指明图片存放目录
    })
  ]
})

使用

五、忽略.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']
  }
})

这里要注意，手动配置

extensions

要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。感谢本次分享到这里就结束了，感谢您的阅读！予人玫瑰，手有余香，别忘了动动手指点个赞。本文如果有什么错误或不足，也欢迎评论区指正！【相关推荐： vue.js视频教程】

相关文章