组件库简介

1、产生：组件库是前端框架产生后才出现的一种概念；

2、考虑组件库的两个方面：

（1）基于什么技术实现的，Vue还是React；

（2）组件库是PC端，还是移动端；

Element UI

传送门

使用方法：看官方文档

Element UI 按需引入

1、安装 babel-plugin-component：

（-D表示开发依赖）

npm install babel-plugin-component -D

2、修改babel.config.js

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

3、修改main.js

//引入vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import { Button,Row } from 'element-ui';//导入需要用到的属性与标签

Vue.config.productionTip = false
//应用ElementUI
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);


new Vue({
  render: h => h(App),
}).$mount('#app')