Vue3
Node.js
TypeScript
路由
接口请求
状态管理
实战项目
求职与未来发展
自动引入
unplugin-auto-import 可以用来引入 vue
中常用的方法,比如 ref
、 reactive
等等,也可以用于自动引入一些第三方的库。
比如以下这段代码:
<template>
{{ name }}
</template>
<script setup>
const name = ref("鸣人")
</script>
将被转换为:
<template>
{{ name }}
</template>
<script setup>
import ref from "vue"
const name = ref("鸣人")
</script>
简易教程
具体使用请参考其 github 上的文档。
安装
npm i -D unplugin-auto-import
Vite 配置
以下针对 vue
、 vue-router
、axios
、pinia
配置了自动引入,更多配置请看 github 上的文档。
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
/* options */
imports:[
'vue',
'vue-router',
{
pinia: ["defineStore"],
axios: [
// default imports
["default", "axios"], // import { default as axios } from 'axios',
],
},
]
}),
],
})
TypeScript 配置
// tsconfig.json
{
"include": [
// 包含自动导出的类型文件
"auto-imports.d.ts",
],
}
自动引入组件
unplugin-vue-components 这个插件可以自动引入在 components 文件夹中定义的组件。
比如以下这段代码:
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
将被转换为:
<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>
简易教程
具体使用请参考其 github 上的文档。
安装
npm i unplugin-vue-components -D
Vite 配置
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
TypeScript 配置
// tsconfig.json
{
"include": [
// 包含自动导出的类型文件
"components.d.ts",
],
}