Vue3.0中element-plus按需引入
首先安装一个按需导入插件yarn add babel-plugin-import -D然后在babel.config.js中,没有的话创建一个module.exports = {plugins: [['import',{libraryName: 'element-plus',customStyleName: (name) => {return `element-plus/lib/theme-
·
首先安装一个按需导入插件
yarn add babel-plugin-import -D
然后在babel.config.js中,没有的话创建一个
module.exports = {
plugins: [
[
'import',
{
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
}
}
]
],
presets: ['@vue/cli-plugin-babel/preset']
};
创建一个global文件夹,里面创建一个register-element.ts
import { App } from 'vue';
import 'element-plus/lib/theme-chalk/base.css';
import {
ElButton,
ElCheckbox,
ElForm,
ElFormItem,
ElInput,
ElLink,
ElRadio,
ElTabPane,
ElTabs
} from 'element-plus'; // 需要的就导入
const components = [
ElButton,
ElForm,
ElFormItem,
ElInput,
ElRadio,
ElTabs,
ElTabPane,
ElCheckbox,
ElLink // 需要的就导入
];
export default function (app: App): void {
for (const component of components) {
app.component(component.name, component);
}
}
然后创建一个入口文件,index.ts
import { App } from 'vue';
import registerElement from './register-element';
export function globalRegister(app: App): void {
app.use(registerElement);
}
然后去到我们的main.ts中
import { globalRegister } from './global';
app.use(globalRegister);
完事,之后在页面中什么都不用引入,直接使用我们在register-element.ts中定义的组件就行
github里面有所有代码,github项目地址https://github.com/lsh555/vue3-ems
更多推荐
已为社区贡献25条内容
所有评论(0)