前端组件库（基于PC端和移动端）

    **前端组件库**是一种用于构建 **Web** 应用程序用户界面的工具。它提供了一组可重用的组件，这些组件可以帮助开发者更快地构建出漂亮、功能强大的用户界面。
     使用前端组件库有很多好处。首先，它可以提高开发效率，因为组件已经被编写好，并且可以直接使用，不需要开发者从头开始编写。其次，它可以提高代码的可维护性，因为组件是可重用的，所以当需要修改某个组件时，只需要修改一个地方，而不需要修改整个应用程序。最后，它可以提高用户体验，因为组件通常经过了精心设计和测试，可以提供更好的用户体验。
     目前，市面上有很多前端组件库可供选择，选择适合自己项目的组件库非常重要，因为不同的组件库可能有不同的特点和优势。

PC端（web端）

Element UI（基于Vue 2）

** ElementuI采用的是服务器是国外的，国内直接访问会慢很多。Element UI中文官网地址：https://element.eleme.cn/#/zh-CN/**

安装教程：

    推荐使用 **npm** 的方式安装，它能更好地和 webpack 打包工具配合使用

    在控制台输入命令：

npm i element-ui -S

在Vue 2里面的main.js中导入Element UI相关配置

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

若希望使用其他语言：

locale.use(lang)

Element UI PLUS（基于Vue 3）

    Element Plus 目前还处于快速开发迭代中，下面是**Element UI PLUS**网址：https://element-plus.gitee.io/zh-CN/

安装教程：

npm install element-plus --save
# 或者
yarn add element-plus

在Vue 3里面的main.js中导入Element UI PLUS相关配置

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

  **  yarn**和**pnpm**可以自行去官网进行查看

iView

    官网：https://www.iviewui.com/

安装

$ npm install view-ui-plus --save

使用script进行全局引用

<script type="text/javascript" src="viewuiplus.min.js"></script>

main.js引入相关配置

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(store)
  .use(router)
  .use(ViewUIPlus)
  .mount('#app')

BootStrap

    基于**HTML，CSS，JavaScript**开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷，下面是**BootStrap**的官网地址：https://www.bootcss.com/

安装

gem install bootstrap -v 4.6.2

创建HTML骨架结构，搭建一个基本的HTML页面，然后从Bootstrap的模板中复制所需代码到HTML页面中，引入Bootstrap样式文件，使用link标签引入Bootstrap的CSS文件。

AVue (基于Vue 3)

    基于Element框架低代码前端框架，它使用 **JSON **配置来生成页面，减少页面开发工作量，极大提升效率，下面是**AVue**官网地址：https://avuejs.com/

安装

npm i @smallwei/avue -S
# 或者
yarn add  @smallwei/avue -S 

引入相关配置

import {createApp} from 'vue';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
const app =createApp({});
app.use(Avue);

移动端

Vant4 UI

    **Vant **是一个轻量，便捷，可定制的移动端组件库**，**适用于构建高性能的移动端页面，下面是**Vant 4**的官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN

安装

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

# 通过 Bun 安装
bun add vant

如果你需要新建一个项目，我们推荐使用 Rsbuild，Vite 或 Nuxt 框架。

引入组件

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

VUX

VUX是基于WeUI和Vue (2.x)开发的移动端UI组件，主要是用来服务微信页面。下面是VUX的官网地址：https://vux.li/

安装

npm install vux --save
# 或者
yarn add vux

具体安装使用可以自行去官网查看

Cube-UI

Cube-UI基于** Vue.js** 实现的精致移动端组件库，滴滴团队开发的移动端组件库。下面是Cube-UI的官网地址：https://didi.github.io/cube-ui/#/zh-CN

安装（安装部分只针对于 vue-cli < 3 的情况）

$ npm install cube-ui --save

1. 修改 package.json 并安装依赖
2. 修改 webpack.base.conf.js
3. 修改 build/utils.js 中的 exports.cssLoaders 函数
4. 修改 vue-loader.conf.js
5. 具体参见 ：add stylus-loader 'resolve url' option by dolymood · Pull Request #970 · vuejs-templates/webpack · GitHub ---> ### Mint UI

Mint UI是基于Vue.js的移动端组件库（现在也支持Vue 2了），是饿了么团队开发的移动端组件库，下面是Mint UI的官网地址：https://mint-ui.github.io/#!/zh-cn

安装

# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

引入相关组件配置

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

其他PC端和移动端组件

PC端

** Ant Design Vue** ：https://2x.antdv.com/docs/vue/introduce-cn
Naive Ul：https://www.naiveui.com/zh-CN/os-theme?from=thosefree.com
Vue Material ：https://www.creative-tim.com/vuematerial/
Buefy：https://buefy.org/
Quasar：http://www.quasarchs.com/

移动端

**NuTUI**：https://nutui.jd.com/#/

** Varlet Ul**：https://varlet.gitee.io/varlet-ui/?from=thosefree.com#/zh-CN/index
OnsenUl：https://onsen.io/?from=thosefree.com