Element Plus

Github（17.9K）：https://github.com/element-plus/element-plus
官方网址：https://element-plus.org/zh-CN/

Element Plus 是一套由饿了么开源出品的为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库。Element Plus 使用 TypeScript + Composition API 进行了重构，提供完整的类型定义文件，使用 Vue 3.0 Composition API 降低耦合、简化逻辑，使用 Lerna 维护和管理项目，完善了 52 种国际化语言支持，支持了黑暗模式。

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器，其环境支持情况如下：

Ant Design Vue

Github(17.4K)：https://github.com/vueComponent/ant-design-vue
官方网址：https://antdv.com/components/overview

Ant Design of Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。其具有以下特性：

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Vue 组件。
共享 Ant Design of React 设计工具体系。

Ant Design Vue 支持服务端渲染，支持在 Electron 中文使用，其环境支持情况如下：

Naive UI

Github(10.9K)：https://github.com/tusen-ai/naive-ui
官方网址：https://www.naiveui.com/

Naive UI 是一款由图森未来开源，基于 Vue 3.0/TypeScript 技栈开发的 UI 组件库。其具有以下特点：

组件丰富完整，超过70个常用业务组件，支持按需引入；
官方提供主题编辑器，不用繁琐的 less、sass、css 变量，也不用 webpack 的 loaders，使用的是由 TypeScript 构建的先进的类型安全主题系统；
运行快小巧轻量，专门针对样式优化，所有组件都可以 treeshaking，不需要导入任何 CSS 就能让组件正常工作。

VARLET

Github(3.6K)：https://github.com/varletjs/varlet
官方网址：https://varlet.gitee.io/varlet-ui/#/zh-CN/index

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。其支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VS Code 插件保障良好的开发体验。

NutUI

Github(4.9K)：https://github.com/jdf2e/nutui
官方网址：https://nutui.jd.com/#/

NutUI 是一套由京东出品的移动端 Vue2、Vue3 组件库，支持一套代码生成 H5 和小程序。其具有以下特点：

70+ 高质量组件，覆盖移动端主流场景
支持按需引用
支持 TypeScript
支持服务端渲染
支持组件级别定制主题，内置 700+ 个变量
国际化支持，已支持英文，印尼语和繁体中文
单元测试覆盖率超过 80%，保障稳定性
提供 Sketch 设计资源

Vant

Github(20.5K)：https://github.com/youzan/vant
官方网址：https://vant-ui.github.io/vant/

Vant 是一套由有赞出品的轻量、可靠的移动端组件库。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。其具有以下特点：

性能极佳，组件平均体积小于 1KB（min+gzip）
70+ 个高质量组件，覆盖移动端主流场景
零外部依赖，不依赖三方 npm 包
使用 TypeScript 编写，提供完整的类型定义
单元测试覆盖率超过 90%，提供稳定性保障
提供 Sketch 和 Axure 设计资源
支持主题定制，内置 700+ 个主题变量
支持按需引入和 Tree Shaking
支持深色模式
支持 Nuxt 3
支持服务器端渲染
支持国际化，内置 20+ 种语言包

Arco Design

Github(1,7K)：https://github.com/arco-design/arco-design-vue
官方网址：https://arco.design/themes/home

Arco Design 是一套由字节跳动出品的基于 Arco Design 的 Vue UI 组件库。提供了 60 多个开箱即用的高质量组件, 可以覆盖绝大部分业务场景。

么是LitElement？

LitElement是一个简单的JAVASCRIPT基类，用于创建快速，轻量级的Web组件，可以在任何支持web components技术的Web页面中使用。

LitElement使用lit-html渲染shadow DOM，并添加API来管理属性。默认情况下会观察属性变化，并且元素在其属性更改时异步更新。

开始使用

安装

您需要npm和Node.js才能使用LitElement。要安装npm和Node.js

LitElement使用JavaScript模块通过其npm包名称导入依赖项。由于Web浏览器需要知道文件的完整URL才能导入，因此本地开发服务器需要为Web浏览器提供完整的转换URL路径。

要部署适用于目标浏览器的优化构建，您还需要一个可以处理此转换的构建工具集以及任何捆绑。

一个选项是Polymer CLI，它包括一个开发服务器，可以将模块名称动态转换为路径; 以及一个可配置的构建工具，用于打包代码以进行部署。

要使用npm安装Polymer CLI：

npm install -g polymer-cli

本地运行LitElement项目：

polymer serve

创建LitElement组件

要基于LitElement创建新类：

在项目文件夹中，从npm安装lit-element包：

npm install lit-element

写下你的新元素：

导入LitElement基类和html帮助函数。

创建一个扩展LitElement基类的新类。

实现渲染以定义Web组件的模板。

使用浏览器注册组件的HTML标记。

示例代码：

my-element.js

// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
// Extend the LitElement base class
class MyElement extends LitElement {
 /**
 * Implement `render` to define a template for your element.
 *
 * You must provide an implementation of `render` for any element
 * that uses LitElement as a base class.
 */
 render(){
 /**
 * `render` must return a lit-html `TemplateResult`.
 *
 * To create a `TemplateResult`, tag a JavaScript template literal
 * with the `html` helper function:
 */
 return html`
 <!-- template content -->
 <p>A paragraph</p>
 `;
 }
}
// Register the new element with the browser.
customElements.define('my-element', MyElement);

使用自定义组件

HTML中使用

<head>
 <script type="module" src="/path/to/my-element.js"></script>
</head>
<body>
 <my-element></my-element>
</body>

在其它ES6组件中使用：

言

我们在前面的章节中已经了解了如何在屏幕上以文本内容的形式获得输出。在本文中我们将学习如何在屏幕上以HTML模板的形式获得输出。我们先看一段代码好来帮助我们理解。

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和组件</title>
 </head>
 <body>
 <div id="vue_det">
 <h1>姓名 : {{ name }}</h1>
 <div>{{ htmlcontent }}</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

//js/app.js+
var vm=new Vue({
 el: '#vue_det',
 data: {
 name: "孙悟空",
 htmlcontent: "<div><h1>Vue Js Template</h1></div>"
 }
})

使用live-server启动项目得到如下结果

因为我们使用了插值，也就是双括号，我们在浏览器中就真实的显示了html内容，这显然和我们想要渲染html是不同的，我们希望它在浏览器能显示html渲染的内容。

v-html

为了解决上面的问题，我们不得不适用v-html指令，只要我们将v-html属性分配给html元素，vue就会知道将其作为html内容输出，我们尝试下：

<div id="vue_det">
 <h1>姓名 : {{ name }}</h1>
 <div v-html="htmlcontent"></div>
 </div>

得到了如下结果

从浏览器调试可以看出

与app.js中填写的html字符串表现得相同

属性分配

我们已经了解了如何将HTML模板添加到DOM。现在，我们将实现如何向现有的HTML元素添加属性。想象一下，我们在HTML文件中有一个图像标记，我们想要分配src属性，举例，直接看代码

 <div id="vue_det">
 <h1>姓名 : {{ name }}</h1>
 <div v-html="htmlcontent"></div>
 <img src="" width="300" height="250" />
 </div>

img标签的src是空的，我们将src放到js的数据对象中

var vm=new Vue({
 el: '#vue_det',
 data: {
 name: "孙悟空",
 htmlcontent: "<div><h1>Vue Js Template</h1></div>",
 imgsrc: './img/img.jpg'
 }
})

然后我们修改index.html

<img src="{{ imgsrc }}" width="300" height="250" />

结果如下

好像哪里不对，其实不是，在vue中，我们绑定属性用v-bind指令

 <img v-bind:src="imgsrc" width="300" height="250" />

可以看到我们浏览器中渲染的html

组件

Vue组件是VueJS的重要功能之一，可以创建自定义元素，可以在HTML中重复使用。让我们使用一个示例并创建一个组件。

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和组件</title>
 </head>
 <body>
 <div id="component_test">
 <testcomponent></testcomponent>
 </div>
 <div id="component_test1">
 <testcomponent></testcomponent>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

//js/app.js
Vue.component('testcomponent', {
 template: '<div><h1>This is coming from component</h1></div>'
});
var vm=new Vue({
 el: '#component_test'
});
var vm1=new Vue({
 el: '#component_test1'
});

我们创建了两个div，id分别是component_test和component_test1，在app.js中我们创建了两个Vue实例，外加一个Vue组件，要想创建组件，它的语法是

Vue.component('nameofthecomponent',{ // options});

创建组件后，组件的名称将成为自定义元素，并且可以在创建的Vue实例元素中使用相同的名称，在app.js文件中创建的组件中，我们添加了一个模板，我们已为其分配了HTML代码。这是一种注册全局组件的方法，可以将其作为任何vue实例的一部分，我们发现这时候浏览器变成了

组件被赋予自定义元素标记，即<testcomponent> </ testcomponent>。但是，当我们在浏览器中检查相同内容时，我们发现结果没有自定义的元素，如以下屏幕截图所示。

我们也可以将组件作为vue实例的一部分

var vm=new Vue({
 el: '#component_test',
 components:{
 'testcomponent': {
 template : '<div><h1>This is coming from component</h1></div>'
 }
 }
});

这是本地注册组件，组件只是vue实例的一部分。到目前为止我们已经基本组件的实现。现在我们来继续扩展。

// js/app.js
Vue.component('testcomponent', {
 template: '<div v-on:mouseover="changename()" v-on:mouseout="originalname();"><h1>Custom Component created by <span id="name">{{name}}</span></h1></div>',
 data: function () {
 return {
 name: "tom"
 }
 },
 methods: {
 changename: function () {
 this.name="bob";
 },
 originalname: function () {
 this.name="tom";
 }
 }
});
var vm=new Vue({
 el: '#component_test'
});
var vm1=new Vue({
 el: '#component_test1'
});

在上面的app.js文件中，我们添加了一个函数，它返回一个对象。该对象具有name属性，该属性被赋值为'tom'。尽管这里data是函数，我们也可以像直接在Vue实例中使用其属性，此外这里还添加了两个函数，在changename中，我们更改name属性，在originalname中我们将其重置为原始名称，有关事件我们后面在讨论，这段代码的结果是：

因为分配了mouseover和mouseout事件，当鼠标悬停在tom上时，会将tom改成bob

动态组件

使用关键字<component> </ component>创建动态组件，并使用属性绑定，如下

<component v-bind:is="view"></component>

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和组件</title>
 </head>
 <body>
 <div id="databinding">
 <component v-bind:is="view"></component>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

//app.js
var vm=new Vue({
 el: "#databinding",
 data: {
 view: "component1"
 },
 components: {
 component1: {
 template:
 '<div><span style="font-size:25;color:red;">Dynamic Component</span></div>'
 }
 }
});

浏览器已显示值：

在线咨询

上一篇：这个神器可以提取你代码中的关键信息生成技术文档
下一篇：在网页制作中合理应用网页边框的样式属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

推荐7个Vue 3的高颜值UI组件库