5个知识点，让vue3开发更丝滑( 二 ) _vue3

这里我介绍的是另外一种写法，也是官方后来出的一种方案，在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=https://www.isolves.com/it/cxkf/kj/2022-04-08/"require('@/assets/image/logo.png')" />但在Vite中不支持require了，引用图片变成了下面这样：
<template><img :src=https://www.isolves.com/it/cxkf/kj/2022-04-08/"Logo" />每次使用图片都得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><img :src=https://www.isolves.com/it/cxkf/kj/2022-04-08/"Logo" />五、忽略.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等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。