Vue UI组件库以及 Element UI 使用

1. Vue UI 组件库

1.1 移动端常用 UI 组件库

• Vant
• Cube UI
• Mint UI

1.2 PC 端常用 UI 组件库

• Element
• IVew UI

2. Element UI

官网： Element UI

2.1 安装

npm i element-ui -S

2.2 上手

完整引入 在 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)
});

2.3 按需引入

• 安装 babel-plugin-component ElementUI/babel-plugin-component

  npm install babel-plugin-component -D
  

• 修改 babel.config.js，追加下面的信息

  {
      //预设
    "presets": [["@babel/preset-env", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }
  

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

  import { Button, Select } from 'element-ui';
  
  Vue.component(Button.name, Button);
  Vue.component(Select.name, Select);