Element UI

Element UI

完整引入

import ElementUI from 'element-ui';

//引入所有组件的样式
import 'element-ui/lib/theme-chalk/index.css';

引入所有的组件
Vue.use(ElementUI);

注：仅用了几个组件，就引入所有组件和所有组件的样式，不合适，导致项目体积特别大

按需引入

babel-plugin-component：专门在UI组件库中用于按需引入的

注：区分开发依赖和生产依赖

官网说的是修改.babelrc文件，但在最新的vue-cli中，已经没有该文件了，需要修改babel.config.js文件

安装babel-plugin-component后，修改以后的内容如下

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

配置好后，进行按需引入即可

//按需引入
//这里的Button,Row,DatePicker就是el组件去掉el部分改为大驼峰形式的名称
import { Button,Row,DatePicker } from 'element-ui';

// 注册的组件名就是我们在使用组件是要用的名字
Vue.component('atguigu-button', Button);
Vue.component('atguigu-row', Row);
Vue.component('atguigu-date-picker', DatePicker);

注：由于我们对babel.config.js进行了配置，引入的组件样式会根据我们import的组件列表自动的将这些组件的样式引入进来

1. 常用组件

1.1 Notification 通知

官方网站：https://element.eleme.cn/2.14/#/zh-CN/component/notification

1.1.1 手动关闭通知

// 发通知时拿到引用
this.refNotify = this.$notify({
  title: '消息通知',
  dangerouslyUseHTMLString: true,
  message: info,
  duration: 20000,
  type: 'success',
  offset: 75
});

// 通过close()关闭即可
this.refNotify.close()