笔记

UI组件库有两大类： 移动端 和 PC端

• 移动端常用 UI 组件库

1. Vant https://vant-ui.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io
4. NUT UI https://nutui.jd.com/
   京东团队打造

• PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn //★★★
   饿了么团队打造

2. IView UI https://www.iviewui.com

Element UI

安装:

npm i element-ui

官网教程： https://element.eleme.cn

• 完整引入:

https://element.eleme.cn/#/zh-CN/component/quickstart
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

• 按需引入 ∈ 开发阶段使用
  

  

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为： //官网说

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

我们没有 .babelrc ， 最新版本的 vue-cli 生成的 该文件已经调整为了 .babel.config.js
.babel.config.js 原文件为:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

根据官网提示，应该修改为:

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

根据视频教程:

Error: Cannot find module 'babel-preset-es2015'

这个错误是因为Babel 版本不匹配导致的。（视频说 这是老版脚手架问题）
解决方案1: //已测试

# 卸载旧 preset
npm uninstall babel-preset-es2015

# 安装新 preset
npm install --save-dev @babel/preset-env

谁知继续往后看视频，视频给出了解决方法。 视频位置: 12:50
方案2：//根据视频内容修改 ★★★

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