Vue UI组件库

常用UI 组件库

移动端常用UI组件库：
1.vant
2.Cube UI
3.Mint UI
4.https://nutui.jd.com/#/

---

PC端常用UI组件库：
1.Element UI
2.IView UI

这里主要介绍 element-ui 的使用

安装：npm i element-ui

一、全部引入

src/main.js

import ElementUI from 'element-ui'  // 导入全部组件
import 'element-ui/lib/theme-chalk/index.css'; // 导入全部样式
Vue.use(ElementUI)  // 使用组件

二、按需引入

1.安装：npm i babel-plugin-component -D，我的一开始报错没有babel npm i babel

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.示例

· 使用了三个el标签：el-date-picker el-row el-button

<div>
    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
    </el-date-picker>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
</div>

· 在main.js引入，每个单词首字母要大写

import {Row,Button,DatePicker} from 'element-ui' // 引入时会自动引入样式
Vue.component(Row.name,Row)	// 可以以全局组件形式使用（Row.name 等于 el-row，可以自行定义）
Vue.use(Button)				// 也可以像插件一样 use，默认叫 el-button
Vue.use(DatePicker)