一:下载element-ui
终端控制台输入npm install element-ui --save
二:在main文件
中引入element-ui
(注意,此方法为全局引入,项目体积会较大一点,只是我觉得方便一点点)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
三:按需引入
借助 babel-plugin-component
,我们可以只引入需要的组件,以达到减小项目体积的目的
1、安装 babel-plugin-component
:
npm install babel-plugin-component -D
2、将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、在main文件中引入你需要的组件
例如需要按钮组件,就可以直接在main中引入Button
import { Button} from 'element-ui';
Vue.use(Button)
四:演示
<template>
<div >
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
其他详情可打开element官网查看。