vuecli4.5.11引入elementUI

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

详情参考官方地址
官网地址