标签： Vue3

Vue3自动导入常用api

unplugin-auto-import让API自动导入

比如

可以让vueAPI里面的ref,reactive,watch,watchEffect等等api直接写在setup内，
可以让vue-router中的createRouter，createWebHashHistory，createWebHistory，useRoute，useRouter等API直接写在setup内
也可以让pinia中的createPinia,definStore直接写在setup内，都不需要再import导入了

安装

npm i unplugin-auto-import -D
or
yarn add unplugin-auto-import -D

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 自动引入vue的api
        AutoImport({
            // 后续vue/vue-router/pinia的API都不需要再单独import到setup里面了
            imports: ['vue', 'vue-router', 'pinia'],
            //dts: 'src/auto-imports...', // 可以自定义文件生成的位置与是否生成，默认是根目录下
            dts: false,
        }),
    ],
})

使用

<script lang="ts" setup>
// onmounted属于vue的api不需要单独引入了
// import { onMounted } from 'vue'

onMounted(() => {
  console.log('unplugin-auto-import')
})
</script>

https://blog.csdn.net/SunFlower914/article/details/126579209

2022年9月14日

Vue3自定义组件名字

在使用setup语法糖的时候没办法直接定义组件的名字，有两种解决方法

写两个script标签

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
//script1：用来定义name
export default defineComponent({
  name: '自定义name'
})
</script>

<script lang="ts" setup>
 //script2：用来定义setup语法糖
</script>

使用vite-plugin-vue-setup-extend

安装

npm i vite-plugin-vue-setup-extend -D

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入vite-plugin-vue-setup-extend
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  // 配置
    plugins: [vue(), VueSetupExtend()],
})

使用

<script lang="ts" setup name="自定义name">
// 使用vite-plugin-vue-setup-extend插件
</script>

https://blog.csdn.net/SunFlower914/article/details/126579209

2022年9月14日