1、element-ui创建项目
vue create chenelementdemo
2、测试是否安装好
npm run serve
3、安装element-ui
(1)安装element-ui
npm i element-ui -S
(2)按需引入
npm install babel-plugin-component -D
(3)修改babel.config.js
plugins: [
// element官方教程
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
(4)在src目录下新建一个文件夹element,在该目录下新建index.js
(5)在src/element/index.js中按需写,注意用不到的可以不写进去,陈chen!!!!
import {
Select,
Option,
OptionGroup,
Input,
InputNumber,
Radio,
Tree,
Dialog,
Row,
Col,
Checkbox,
CheckboxButton,
CheckboxGroup,
Cascader,
Switch,
Slider,
TimeSelect,
TimePicker,
DatePicker,
Upload,
Rate,
ColorPicker,
Transfer,
Form,
FormItem,
Table,
TableColumn,
Tag,
Button,
Progress,
Pagination,
Badge,
Avatar,
Alert,
Loading,
Message,
MessageBox,
Notification,
Menu,
MenuItemGroup,
MenuItem,
Submenu,
RadioGroup,
RadioButton
} from 'element-ui'
const element = {
install: function(Vue) {
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Radio)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)
Vue.use(Checkbox)
Vue.use(CheckboxButton)
Vue.use(CheckboxGroup)
Vue.use(Cascader)
Vue.use(Switch)
Vue.use(Slider)
Vue.use(TimePicker)
Vue.use(TimeSelect)
Vue.use(DatePicker)
Vue.use(Upload)
Vue.use(Rate)
Vue.use(ColorPicker)
Vue.use(Transfer)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Button)
Vue.use(Progress)
Vue.use(Pagination)
Vue.use(Badge)
Vue.use(Avatar)
Vue.use(Alert)
Vue.use(Loading)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$notify = Notification;
}
}
export default element
(6)在main.js中添加
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)
4、检测测试下
<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>