支持
vue
,vue-router
,vue-i18n
,@vueuse/head
,@vueuse/core
等自动引入
// 引入前
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)
// 引入前
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}
//引入后
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}
npm i -D unplugin-auto-import
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
// auto-import.d.ts生成的位置(默认是在根目录) 会在
dts: 'src/type/auto-import.d.ts',
})
]
})
npm i unplugin-vue-components -D
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
/* options */
// 自动引入文件的位置
dts: 'src/type/components.d.ts',
}),
],
})
It will automatically turn this
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
into this
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
import HelloWorld from './src/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
为了获得对自动导入组件的TypeScript支持,Vue 3有一个PR扩展了全局组件的接口。目前,Volar已经支持这种用法。如果您使用的是Volar,您可以如下更改配置以获得支持。
Components({
dts: true, // enabled by default if `typescript` is installed
// dts: 'src/type/components.d.ts'
})
在include
下将components.d.ts
添加到tsconfig.json
中
{
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
}
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import {
AntDesignVueResolver,
ElementPlusResolver,
VantResolver,
} from 'unplugin-vue-components/resolvers'
// your plugin installation
Components({
resolvers: [
AntDesignVueResolver(),
ElementPlusResolver(),
VantResolver(),
],
})
可以去antfu大佬的插件链接查看更多的配置
Vue3 中写调试代码需要name
npm install unplugin-vue-define-options -D
//vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import defineOptions from 'unplugin-vue-define-options/dist/vite';
export default defineConfig({
plugins: [vue(), defineOptions()],
});
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options/macros-global" /* ... */]
}
}
<script lang="ts" setup>
defineOptions({
name: 'YourName',
});
</script>
vue3 中另外一种name定义方式,直接写在script标签上
https://github.com/vbenjs/vite-plugin-vue-setup-extend
一、安装
npm i vite-plugin-vue-setup-extend -D
二、配置 vite.config.js中
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [vue(), vueSetupExtend()],
})
三、使用
<script lang="ts" setup name="App">
// script 里面必须有东西 哪怕是一个注释都行
</script>
Pinia持久化插件
详情看: https://github.com/pan52yu/MyNote/blob/main/article/Vue3%E5%AD%A6%E4%B9%A0/Pinia.md
- 该项目技术栈为 Vue3 + TS + Pinia + Vue Router