最近在学习vue3+vite的时候学习到的一些小技巧，现在记录一下
文章目录
前言一、setup name 增强1、第一个方法就是使用两个标签具体看以下代码2、借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，可以直接在script标签上定义name。安装
配置使用
二、告别.value三、忽略.vue后缀
前言
学习vue3+vite中看到了一些小技巧，这个小技巧可以在写代码时更加的顺畅，更加的丝滑。
一、setup name 增强
在写vue3中，有一个语法糖大家一定很清楚，那就是setup，但使用setup语法带来的一个问题就是无法自己设置name，而当我们使用keep-alive往往是需要name的，那我们怎么解决这个问题呢？
1、第一个方法就是使用两个标签具体看以下代码
当然这样写似乎也可以，但是看着不够精细，有点乱糟糟的，不符合vue3的特点，于是我就找到了一个方法：
2、借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，可以直接在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()
]
})
使用
二、告别.value
众所周知，ref要求我们访问变量时需要加上.value，这让很多开发者觉得难受
let num = ref(1)
const addNum = () => {
num.value += 1
}
于是官方出的一种方案，在ref前加上$，该功能默认关闭，需要手动开启。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
refTransform: true // 开启ref转换
})
]
})
开启之后可以这样写：
let num = $ref(1)
const addNum = () => {
num ++
}
该语法糖根据不同的版本配置也略有不同，下面贴一下我自己所用相关插件的版本：
"vue": "^3.2.2",
"@vitejs/plugin-vue": "^1.9.0",
"@vue/compiler-sfc": "^3.2.5",
"vite": "^2.6.13"
该属性仍处于实验性阶段，谨慎使用！！！
三、忽略.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', '.vue']
}
})
虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。
好文链接
您阅读本篇文章共花了：
发表评论