最近写vue3项目的时候接触到一个插件,可以帮你自动引入vue3新语法,不用再自己引入,有兴趣的小伙伴可以取github看看,尤大大推荐
插件名: unplugin-auto-import
下载安装:npm i -D unplugin-auto-import
配置:vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//配置vuejsx
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from "path"
//引入自动引入插件
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/ //npm install @types/node --save-dev
export default defineConfig({
plugins: [vue(), vueJsx(), AutoImport({
imports: ['vue'], dts: 'src/auto-import.d.ts'
})],
// 配置 @ 符号
resolve: {
alias: {
"@": resolve(__dirname, "src")
}
}
})
Demo:页面中使用
<template>
<!-- <Layout /> -->
<div class="APP">我是根组件
<button @click="changeFlag">change</button>
<div>{{ flag }}</div>
</div>
</template>
<script lang="ts" setup>
//没有手动引入ref
const flag = ref(false)
const changeFlag = () => {
flag.value = !flag.value
}
</script>
<style lang = "less" >
.APP {
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>