ElementUI按需引入各种组件
ElementUI按需引入各种组件一、首先按需引入前奏安装element-uinpm i element-ui -S.安装按需引入必要插件npm install babel-plugin-component -D修改.babelrc如果是vueCli3 则修改babel.config.jsmodule.exports = {presets: ["@vue/app"],plugins: [// el
·
ElementUI按需引入各种组件
一、首先按需引入前奏
-
安装element-ui
npm i element-ui -S
-
.安装按需引入必要插件
npm install babel-plugin-component -D
-
修改.babelrc 如果是vueCli3 则修改babel.config.js
module.exports = { presets: ["@vue/app"], plugins: [ // element官方教程 [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ] ] };
-
在src目录下新建一个文件夹element,在该目录下新建Index.js
-
在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
-
在main.js中写入
import 'element-ui/lib/theme-chalk/index.css' import element from './element/index' Vue.use(element)
-
这个博主可以关注了
更多推荐
已为社区贡献4条内容
所有评论(0)