Vue常见UI组件库

移动组件库：

1. Vant: https://youzhan.github.io/vant
2. CubeUI: https://didi.github.io/cube-ui
3. MintUI: https://mint-ui.github.io

PC常用的组件库：

1. ElementUI: https://element.eleme.cn
2. IViewUI: https://iviewui.com

1. ElementUI组件库

解决使用组件库文件太大的问题:使用按需加载

1.1 安装 babel-plugin-component

npm install babel-plugin-component -D  // -D 表示安装包是开发时依赖

1.2 修改babel.config.js文件

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',  // 用来解析vue组件中的js
        // ["es2015", {"modules": false}]  element-ui没有跟随vue官方升级，文档还是以前的写法
        ["@babel/preset-env", {"modules": false}]
    ],
    plugins: [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

1.3 配置main.js

不再需要导入css, Vue和ElementUI会自动识别导入css样式

// 引入vue
import Vue from 'vue'
import App from './App.vue'

// 关闭vue的生产提示
Vue.config.productionTip = false

import {Button, Row, DatePicker} from 'element-ui'

Vue.component(Button.name, Button)
Vue.component(Row.name, Row)
Vue.component(DatePicker.name, DatePicker)

// 创建vm实例对象
new Vue({
  el: '#app',
  render: h => h(App),
})