5个知识点，让vue3开发更丝滑

前言

最近鼓捣了一下 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.tsimport { 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出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的
VueAPI，比如
ref、
computed、
watch等，还是每次都需要我们在页面上手动进行
import。


我们可以通过
unplugin-auto-import实现自动导入，无需
import即可在文件里使用
Vue的API。


安装

npm i unplugin-auto-import -D
配置

// vite.config.tsimport { 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 controldeclare 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，直接使用refconst 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报错问题


在没有
import的情况下使用会导致
eslint提示报错，通过如下步骤解决：

// vite.config.tsAutoImport({    dts: ‘types/auto-imports.d.ts’,    imports: [‘vue’],    // 解决eslint报错问题    eslintrc: {      enabled: true    }})
这时会自动生成
.eslintrc-auto-import.json文件，将其导入
eslintrc.js即可。

// eslintrc.jsmodule.exports = {  extends: [    ‘./.eslintrc-auto-import.json’  ]}
三、告别.value

众所周知，
ref要求我们访问变量时需要加上
.value，这让很多开发者觉得难受.

let count = ref(1)const addCount = () => {  count.value += 1}
后来尤大大也提交了一份新的
ref语法糖提案。

ref: count = 1const addCount = () => {  count += 1}
该提案一出便引起了社区的一片讨论，时间已经过去很久了，这里就不再废话这个话题了。


这里我介绍的是另外一种写法，也是官方后来出的一种方案，在
ref前加上
$，该功能默认关闭，需要手动开启。

// vite.config.tsimport { 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>  </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.tsimport { defineConfig } from ‘vite’import ViteImages from ‘vite-plugin-vue-images’export default defineConfig({  plugins: [    ViteImages({      dirs: [‘src/assets/image’] // 指明图片存放目录    })  ]})
使用

<template>  <!– 直接使用 –>  </template><script lang=”ts” setup>// import Logo from ‘@/assets/image/logo.png'</script>
五、忽略.vue后缀

相信很多人在
Vue2开发时，导入文件都是忽略.vue后缀的。但在
Vite里，忽略.vue后缀会引起报错。

import Home from ‘@/views/home’ // errorimport Home from ‘@/views/home.vue’ // ok根据尤大大的回答，必须写后缀其实是故意这么设计的，也就是提倡大家这么去写。

但如果你真的不想写，官方也是提供了支持的。

// vite.config.tsimport { defineConfig } from ‘vite’export default defineConfig({  resolve: {    extensions: [‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’, ‘.vue’]  }})这里要注意，手动配置
extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。