vue中elementUI列表以及按需引入

vue中elementUI列表引入

配置前需要先下载elementui

npm i element-ui -S
```##  vue中elementUI列表引入
## elementUi全局引入
### main.js中配置
```javascript
import Vue from 'vue';
//引入elementui框架
import ElementUI from 'element-ui';
//css需要引入否则elementui无法生效
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

列表引入

首先创建一个elemenui.js文件

import Vue from 'vue';
import {
  Input,
  InputNumber,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  Form,
  FormItem,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Loading,
} from 'element-ui';
//引入element-ui
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(FormItem);
Vue.use(Form);
Vue.use(TableColumn);
Vue.use(Table);
Vue.use(ButtonGroup);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);

Vue.use(Loading.directive);
//引入css文件
import 'element-ui/lib/theme-chalk/index.css';

main.js中配置

//将刚刚创建的js文件引入main.js中让他运行,不需要其他配置就OK了
import'./until/elementUi.js';

vue中elementUI按需引入

第一步: 下载借助 babel-plugin-component依赖

npm install babel-plugin-component -D

第二步在babel.config.js配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

第三步在main.js中配置

import { Icon, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//CSS需要单独引入否则不生效,没有样式
Vue.component(Icon.name, Icon);
Vue.component(Button.name, Button);
有错误的话希望指正谢谢各位大佬
  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页

打赏

此心安处便是吾乡丶

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者