Vue 笔记 6 - Vue UI

移动端常用UI组件库

• Vant https://youzan.github.io/vant/#/zh-CN/
• CubeUI https://didi.github.io/cube-ui/#/zh-CN
• MintUI http://mint-ui.github.io
• NutUI （京东） https://nutui.jd.com/

PC端常用UI组件库

• ElementUI （饿了么） https://element.eleme.cn
• IView UI https://www.iviewui.com
• AntDesign （阿里）

ElementUI

安装：

npm i element-ui

使用：

• 完整引入

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

注意：完整引入会导致chunk-vendors.js体积庞大，一般按需引入即可

• 按需引入：
  安装babel-plugin-component

npm install babel-plugin-component

修改babel.config.js

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

修改main.js，按需引入组件：

// 引入ElementUI的部分组件
import {Button, Row} from 'element-ui'

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