Vue UI组件库以及 Element UI 使用_user表以及elementui基于vue封装的ui组件库学习,学习git的基本使用。-优快云博客

本文链接：https://blog.youkuaiyun.com/pingting_/article/details/123546305

本文介绍了VueUI中的移动端和PC端常用UI组件库，如Vant、CubeUI、MintUI以及ElementUI。详细讲解了ElementUI的安装、快速上手和按需引入的方法。在main.js中配置并引入组件，展示了如何只引入特定组件如Button和Select。

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

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);