elemrnt UI 应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Guuiabc/article/details/128841627

文章介绍了移动端常用的UI组件库Vant、CubeUI和MintUI，以及PC端的ElementUI和IViewUI。强调了使用babel-plugin-component实现按需引入组件以减小项目体积的方法，提供了配置示例，并展示了在main.js中引入特定组件的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7.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

7.2 PC 端常用UI 组件库

1. Element UI https://element.eleme.cn

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

应用：（全部引入）

应用：按需引入

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

首先，安装babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：（新版本里文件名为：babel.config.js）

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

（追加）

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

importVue from'vue';
import{ Button, Select } from'element-ui';
importApp from'./App.vue';
Vue.component(Button.name,Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */newVue({
  el: '#app',
  render: h=>h(App)
});

由于脚手架更新了，所以需要更改配置：