1、安装Element UI
npm i element-ui -S
2、Vue引入Element UI插件库的两种方式
(1)全引入
main.js
import ElementUI from 'element-ui'; //引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; //引入ElementUI全部样式
Vue.use(ElementUI) //应用ElementUI
(2)按需引入
首先,安装babel-plugin-component:
npm install babel-plugin-component -D
修改babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
main.js
//按需引入ElementUI组件
import { Row,Button,DatePicker,Table,TableColumn,Pagination,Loading } from 'element-ui';
Vue.component(Row.name, Row);
Vue.component(Button.name, Button);
Vue.component(DatePicker.name, DatePicker);
Vue.component(Table.name, Table);
Vue.component(TableColumn.name, TableColumn);
Vue.component(Pagination.name, Pagination);
Vue.use(Loading.directive);