vuecli4.5.11引入elementUI
话不多说网上查了很多并且官方也还没给出正式版elementUI引入,目前只是体验引入项目
1.完整引入(不推荐使用,测试版还是有bug)
在 main.js 中写入以下内容:
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
2.然后,将 babel.config.js 修改为(重点):
module.exports = {
plugins: [
[
"import",
{
libraryName: 'element-plus',
customStyleName: (name) => {
// 由于 customStyleName 在配置中被声明的原因,`style: true` 会被直接忽略掉,
// 如果你需要使用 scss 源文件,把文件结尾的扩展名从 `.css` 替换成 `.scss` 就可以了
return `element-plus/lib/theme-chalk/${name}.css`;
},
},
],
],
};
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
3.局部引入(推荐)main.js
import { ElButton, ElSelect, ElLoading, ElMessage, ElMessageBox, ElInfiniteScroll } from 'element-plus';
var app = createApp(App)
const components = [
ElButton,
ElSelect
]
const plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
]
console.log(components)
components.forEach(component => {
app.component(component.name, component)
})
plugins.forEach(plugin => {
app.use(plugin)
})
const option = { ElementPlus: { size: 'small', zIndex: 3000 } }
app.config.globalProperties.$ELEMENT = option
详情参考官方地址
官网地址