当前位置: 首页 > 工具软件 > Autosetup > 使用案例 >

vite-plugin-vue-setup-extend和unplugin-auto-import让v3开发更丝滑

周翰池
2023-12-01

一.vite-plugin-vue-setup-extend让v3的setup语法糖增强

在使用setup语法糖的时候没办法直接为组件定义name,需要使用两个script标签来完成,如:

<script lang="ts">
import { defineComponent, onMounted } from 'vue'

//script1:用来定义name
export default defineComponent({
  name: '自定义name'
})
</script>

//script2:用来定义setup语法糖
<script lang="ts" setup>
onMounted(() => {
  console.log('===')
})
</script>

解决方案:

1.下载此插件:

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

 2.vite.config.js中:

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

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

3.使用:

<script lang="ts" setup name="自定义name">
import { onMounted } from 'vue'

onMounted(() => {
  console.log('===')
})
</script>

二、unplugin-auto-import让API自动导入

比如(这里建议大家对比较熟悉的api做引入咯):

可以让vueAPI里面的ref,reactive,watch,watchEffect等等api直接写在setup内,

可以让vue-router中的createRouter,createWebHashHistory,createWebHistory,useRoute,useRouter等API直接写在setup内

也可以让pinia中的createPinia,definStore直接写在setup内,都不需要再import导入了

1.安装插件:

npm i unplugin-auto-import -D

 2.vite.config.js中:

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

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

 3.使用:

<script lang="ts" setup name="自定义name">
// onmounted属于vuede API不需要单独引入了
// import { onMounted } from 'vue'

onMounted(() => {
  console.log('===')
})
</script>

 类似资料: