中小型企业 公司网站建设,做个微信小程序需要花多少钱,网页特效设计,岳阳网站建设推广1.使用ant-design-vue或者element-ui时#xff0c;如何每个组件都去import导入组件#xff0c;大大降低了开发效率#xff0c;如果全局一次性注册会增加项目体积#xff0c;那么如何实现既不局部引入#xff0c;也不全局注册#xff1f;
2.在element-plus官网看到有说明…1.使用ant-design-vue或者element-ui时如何每个组件都去import导入组件大大降低了开发效率如果全局一次性注册会增加项目体积那么如何实现既不局部引入也不全局注册
2.在element-plus官网看到有说明 3.那么在webpack中也是可以使用的下载unplugin-auto-importunplugin-vue-components两款插件
pnpm install -D unplugin-auto-import unplugin-vue-components
4.在vue.config.js中配置
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { AntDesignVueResolver } require(unplugin-vue-components/resolvers);AutoImport({imports: [vue, vue-router],resolvers: [AntDesignVueResolver()],}),Components({resolvers: [AntDesignVueResolver()],}),
5.在项目中使用
templatediv idapp!-- router-view/router-view --a-button按钮/a-buttona-divider //div
/templatescript
export default {name: App,
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style6.发现报错AutoImport is not a function打印AutoImport发现是个对象AutoImport.defalut才是函数更改下vue.config.js配置
AutoImport.defalut({imports: [vue, vue-router],resolvers: [AntDesignVueResolver()],}),Components.defalut({resolvers: [AntDesignVueResolver()],}),
7.运行项目还是报错 Module build failed (from ./node_modules/.pnpm/unplugin2.2.0/node_modules/unplugin/dist/webpack/loaders/transform.js): Error [ERR_REQUIRE_ESM]: require() of ES Module
发现插件用的是es语法而我们用的是commonjs语法如何解决降低插件版本
unplugin-auto-import: 0.16.0,unplugin-vue-components: 0.22.0,
8.运行之后发现没报错了完美解决
9.经过测试发现在使用a-layout、a-layout-sider组件时报错ant-design-vue并没有抛出a-layout-sider控制台也输出了全部抛出的组件发现并没有抛出a-lay-sider包括a-layout-header、a-layout-content、a-layout-footer去node_modules下查看a-design-vue源码发现只抛出了a-layout组件其他四个是通过vue.component全局注册的所以ant-design-vue不适合用unplugin-auto-import换成element-ui试下测试el-menu、el-sub-menu、el-menu-item是否会出现同样的问题呢
10.经过测试element-ui不会报错查看源码发现element-ui抛出了所有的组件比如el-menu、el-menu-item、el-sub-menu所以想要使用unplugin-auto-import只能使用element-ui。
