跟着尚硅谷学vue2—进阶版6.0—Vue UI 组件

7. Vue UI 组件

1. 移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io

2. PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn
2. IView UI https://www.iviewui.co

3.element UI

1.全局引入

在 main.js 中写入以下内容：

// 完整引入
// 引入 ElementUI 组件库
import ElementUI from 'element-ui';
// 引入 ElementUI 全部样式
import 'element-ui/lib/theme-chalk/index.css';
// 应用 ElementUI
Vue.use(ElementUI);

2.按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 babel.config.js 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，在 main.js 中写入以下内容：

// 按需引入
import { Button, Row, DatePicker } from "element-ui";
// 应用 ElementUI
Vue.component('atguigu-button', Button);
Vue.component('atguigu-row', Row);
Vue.component('atguigu-date-picker', DatePicker);

按需引入报错：

原因：老版脚手架是 “es2015”,现在应改成：“@babel/preset-env”