长治个人做网站,开福区城乡建设局网站,自主建网站,微信网站开发企业unplugin-auto-import#xff1a;自动按需引入 vue\vue-router\pinia 等的 api unplugin-vue-components#xff1a;自动按需引入 第三方的组件库组件 和 我们自定义的组件
使用此类插件#xff0c;不需要手动编写import {xxx} from vue这样的代码了#xff0c;提升开发效…unplugin-auto-import自动按需引入 vue\vue-router\pinia 等的 api unplugin-vue-components自动按需引入 第三方的组件库组件 和 我们自定义的组件
使用此类插件不需要手动编写import {xxx} from vue这样的代码了提升开发效率。
unplugin-auto-import 原理
以 vue与vite为例会读取文件中script部分的字符以空白符进行间隔如const a getName() 会过滤一些指定的字符读取到 const 、 a 、getName这些字符串传入unplugin-auto-import 作为 name那么在运行的时候只需要匹配name 是否与生效的自动导入API匹配如果匹配则在vite启动的时候将对应的文件加入到运行环境中并且生成全局ts声明。
安装插件
npm install -D unplugin-vue-components unplugin-auto-import配置 vite.config.ts
// vite.config.ts
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/viteexport default {plugins: [// ...AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md/\.\/src\/layouts/,],dts: ./auto-imports.d.ts,imports: [vue,vue-router,{tdesign-vue-next: [MessagePlugin, DialogPlugin],vueuse/core: [useToggle],},],dirs: [./src/hooks, ./src/utils, ./src/store/modules/*.ts],vueTemplate: true,eslintrc: {enabled: false, // Default falsefilepath: ./.eslintrc-auto-import.json, // Default ./.eslintrc-auto-import.jsonglobalsPropValue: true, // Default true, (true | false | readonly | readable | writable | writeable)},}),Components({dts: true,dirs: [src/components],}),],
}
参考链接 https://juejin.cn/post/7086326589897572389 https://juejin.cn/post/7062648728405934087
