作者:黄石幽兰it | 来源:互联网 | 2023-09-18 13:39
1.安装element-uinpmielement-ui-S2.安装按需引入必要插件npminstallbabel-plugin-component-D3.修改.babelrc如果
1.安装element-ui
2.安装按需引入必要插件
npm install babel-plugin-component -D
3.修改.babelrc 如果是vueCli3 则修改babel.config.js
module.exports = {
"presets": [
‘@vue/cli-plugin-babel/preset‘
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
4.在src目录下新建一个文件夹element,在该目录下新建index.js
5.在src/element/index.js中按需写
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)