[JavaScript知识库]vite-plugin-vue-setup-extend和unplugin-auto-import让v3开发更丝滑

一.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>