十大常用web前端UI组件库，赶紧收藏！

今天主要介绍web前端常用的UI库，这些网站基本都是背靠互联网大厂，值得web前端开发者收藏，当然还是要多多学习使用。

Vant

一款有赞出品轻量、可靠的的移动UI组件库，目前支持Vue2、Vue3、React，微信和支付宝小程序，并由社区团队维护 React版本和支付宝小程序版本。

官网的文档清晰易懂，如果你熟悉vue.js的组件化开发，上手非常容易。

AntDesign

Ant Design是一套企业级UI 设计语言和React组件库，提供了一套非常完整的组件化设计规范与组件化编码规范，能大幅提高了部分产品的设计研发效率及质量。

PC端组件库文档中的设计原则写的比较完善，并且每个组件都描述了何时使用，让其对组件有更深的认识，提供的设计资源也是非常完善，值得web前端企业开发者们收藏！

AntDesign Mobile

Ant Design 移动端设计规范，一个基于Preact/React/React Native 的UI 组件库。新版样式比较好，文档更新的也好用起来了

Bootstrap

Bootstrap 是全球受欢迎的前端开源工具库，Bootstrap4中文文档这个UI 库来自Twitter 的成员，拥有了box-flex布局等更新，但是组件比较少，特点是提供了很多工具类；需要引入JQuery，如果有自己特殊的需求，就需要重新定制样式。

FlatUI是基于Bootstrap做的Metro化改造，由Designmodo提供。FlatUI包含了很多Bootstrap提供的组件，但是外观更加漂亮。

Layui

经典开源模块化前端UI 框架(官方文档镜像站)，JQuery时代很好的UI 库，是一套开源的Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵循原生HTML/CSS/JS 的开发方式,极易上手,拿来即用。

ElementUI

出自饿了么前端团队，学Vue 的童鞋们必用的一款UI 库，采用Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型，也支持有Angular 和React 的版本，ElementPlus 支持Vue3。

semidesign

出自字节跳动抖音前端与UED 团队，是一款包含设计语言、React组件、主题等开箱即用的中后台解决方案，可用于快速搭建美观的React 应用。

TaroUI

出自京东凹凸实验室，基于Taro 的多端UI 组件库，提供友好的API，可灵活的使用组件，一套组件可以在 微信小程序、H5、ReactNative 等多端适配运行。

Vuetify

Vuetify 是建立在Vue.js之上的完备的界面框架。该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。 Vuetify从一开始就设计为易于学习的并且拥有来自 Material设计规范的数百个精心设计组件。每一个组件都经过精心设计，具有模块化、响应式和优秀的性能。

WeUI

WeUI ——微信官方的UI 库，一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

vue搭配什么做前端开发比较好？一、UI框架二、网络请求框架

很高兴为你回答这个问题：

一、vue针对pc端UI框架有

1，iview （最新，用户评分高功能多炫酷 解决和避免了其他UI框架出现的一些小问题）

2, bootstrap （使用用户最多样式死板没特色）

3，ElementUI （饿了么团队研发，使用较多不过里还有些小bug）

二、vue针对移动端UI框架有：

1，BUI http://www.easybui.com/docs/ 很不错 官网有视频介绍。视频里有介绍非常非常实用的工具 建议去看官网视频。

这个框架有现成的模板只需要一个 创建模板的命令 就可以创建一个大致的具有交互功能的页面。

2，vux （最新）

vux基于WeUI和Vue(2.x)开发的移动端UI组件库star 10k

基于webpack vue-loader vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

3，Mint UI

Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库star 8.3k

三、Vue用脚手架搭建

1.安装nodejs

自带npm

2. 安装淘宝镜像 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v

4.安装脚手架

用cnpm安装vue脚手架

cnpm install -g vue-cli

5.创建工程 vue init webpack my-project

需要注意的是项目的名称不能大写，不然会报错

6.安装依赖cnpminstall

7.用命令npm run dev 来启动项目

特别注意：

1.如果提示“无法识别”，有可能是npm的版本过低。

解决办法：npm install -g npm（更新一下版本就好了）。

2.如果安装失败的话。

解决办法：npm cache clean（清除一下缓存就好了）

四、后台接口

1.安装npm install axios --save

2.在main.js下引用axios

import axios from 'axios'

3.准备json后台数据:java、php、.net都可以

4.跨域问题，设置代理，利用proxyTable属性实现跨域请求在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代码

proxyTable: { '/api': { target: 'http://www.intmote.com',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true,//允许跨域 pathRewrite: { '^/api': '' //这个是定义要访问的路径，名字随便写 } } },

5.打开一个界面，开始写请求数据的方法

methods: { getData() { axios.get('/api/test.json').then(response = { console.log(response.data); }, response = { console.log("error"); }); } }

希望以上能帮助到你。

网页前端常用的库或框架有哪些

当前网站开发较成熟的ui组件有哪些