【原创】Vue 常用组件库

移动端常用 UI 组件库

• Vant
• Cube UI
• Mint UI

PC 端常用组件库

• Element UI
• IView UI
• NutUI

Element UI

引入全部

main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

按需引入

在 main.js 中注释掉之前引入 Element UI 的 3 行代码。
借助 babel-plugin-component 可以只引入需要的组件，以达到减小项目体积的目的。

• 安装 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 Vue from 'vue';
  import { Button, Select } from 'element-ui';
  import App from './App.vue';
  Vue.component(Button.name, Button);
  Vue.component(Select.name, Select);
  /* 或写为
  * Vue.use(Button)
  * Vue.use(Select)
  */
  new Vue({
  el: '#app',
  render: h => h(App)
  });