Vue知识点整理（七）- Vue UI组件库

一、移动端常用 UI 组件库

1. Vant

2. Cube UI

3. Mint UI

二、PC 端常用 UI 组件库

1. Element UI

2. IView UI

三、Element UI 组件库的使用

3.1 安装

3.1.1 npm安装

npm 的方式安装能更好地和 webpack 打包工具配合使用（推荐）

npm i element-ui

3.1.2 CDN

可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3.2 引入 Element

3.2.1 完整引入

在 main.js 中写入，但完整引入的话会占用体积会大很多，因此不推荐完整引入

import Vue from 'vue';

// 引入ElementUI组件库
import ElementUI from 'element-ui';

// 引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

// 应用ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3.2.2 按需引入

1. 安装 babel-plugin-component

npm install babel-plugin-component -D

2. 将 babel.config 修改为：

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    // 'es2015'为老版脚手架要求，现在写'@babel/preset-env'
    ["@babel/preset-env", { modules: false }],
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

3. 如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';

// 按需引入
import { Button, Select } from 'element-ui';

import App from './App.vue';

// 应用ElementUI
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});