ElementUI的完整引入和按需引入

最新推荐文章于 2024-08-07 18:21:52 发布

Ideaing~

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量598

点赞数

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/L_csdn123/article/details/125615923

版权

1 完整引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2 按需引入
（1）先安装一个按需引入需要的插件

npm install babel-plugin-component -D

（2）修改babel.config.js文件配置

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

（3）举例引入几个组件（在main.js文件中）：

import {
  Pagination, Popover,
  Tooltip, Table,
  TableColumn, MessageBox
} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Pagination).use(Popover).use(Tooltip).use(Table).use(TableColumn);

// 按虚引入的话$alert 还会报错，那么有些就还是先全量引入
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$message = Message;