unplugin-auto-import/vite、unplugin-vue-components/vite实现自动引入本地组件、js脚本依赖

PS:网上找到一堆基本都是只有elment-plus的自动引入,于是自己上官网查:unplugin-vue-components - npm

unplugin-auto-import - npm

以下配置请结合官网和自己的项目食用 

以下是我自己项目中的vite.congfig.ts的配置:

//js按需自动引入
    AutoImport({
      imports: [
        'vue',//引入vue3
        'vue-router',//引入vue-router
        { 'vxe-table': ["VXETable",] },
        { '@element-plus/icons-vue': ["View", "Plus"] },
        { from: "./src/type/index.ts", imports: ["Page", "VLO"], type: true },
        { from: "element-plus", imports: ["ElMessageBoxShortcutMethod"], type: true },
        { from: "vue-router", imports: ["LocationQueryValue"], type: true },
        {
          from: "vxe-table/types/all",
          imports: [
            "VxeFormPropTypes",
            "VxeFormEvents",
            "VxeGridPropTypes",
            "VxeGridListeners",
            "VxeButtonEvents",
            "VxeTableDefines",
            "VxePulldownInstance",
            "VxeGridProps",
            "VxeTablePropTypes",
            "VxeColumnPropTypes",
            "SizeType",
          ],
          type: true
        },
        { from: "@/components/x-desc-list/type", imports: ["DescInput", "DescSelect", "DescDatePicker", "DescElDict", "DescButtonOption", "DescInputNumber", "DescSlot"], type: true }
      ],
      dirs: [//配置本地目录自动引入
        "./src/utils/**",
        "./src/api/**",
        "./src/type/**",
        "./src/components/x-desc-list/**",
        "./src/store/**",
        "./src/router/**",
      ],
      //引入element-plus
      resolvers: [ElementPlusResolver()],
      dts: "src/auto-import.d.ts",
      vueTemplate: true
    }),
    //组件按需自动引入
    Components({
      dirs:['./src/components'],//查找组件的相对路径
      extensions:['vue'],//组件的扩展名
      deep:true,//搜索子目录
      resolvers: [
        ElementPlusResolver(),
      ],//组件解析器element
      // allowOverrides:true,//覆盖其他同名文件
      //默认存放位置
      dts: "src/components.d.ts",
      // collapseSamePrefixes:true,
    }),复制

 以上代码自动导入了我项目utils,api,store包下的所有导出语句和src/components包下的所有vue组件.

需要注意的是:

1.导出js脚本的时候不要,用export default,而要用export xxx这种写法,否则会导入失败.

2.vueTemplate选项配置,可以让导出的js函数在template标签中使用.

3.导入组件的时候,如果template中使用的导入的组件有ref属性,不要使用驼峰命名,测试的话好像是第一个字母小写第二个字母马上大写的驼峰命名会有问题.

 然后就可以愉快的把import语句删掉啦