响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效],希望能够帮助你!!!。
今天给小伙伴们推荐一款超不错的Vue轻量级组件框架XVueUI。
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第1张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-5c1b7db7fe954b6b8f0d7c8d2992f5f7.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=QJoPVVThAIr3deSvI3qMTF46zI4%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第1张_编程好6博客")
xvue-ui 基于vue2.x构建的响应式前端组件化框架。轻量级、易于上手，提供一系列丰富的css和js组件。
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第2张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-7ca10603e91a4e5c8c25f831e51a12b8.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=27iKMN2joiz5%2Buknn6GEUtilez0%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第2张_编程好6博客")
说明
- 一款基于vue.js开发的响应式框架,包含丰富的css和js组件。
- 除了基础组件，还提供了很多封装的大型组件。
- 轻量级，语义化标签，上手简单。
- 按需定制化很多专用组件。做到一个适用于任何应用的解决方案。
安装
$ npm i xvue-ui -S引入组件
在main.js中引入组件。
import Vue from 'vue';
import xvueui from 'xvue-ui';
Vue.use(xvueui);![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第3张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-d49b587d25ae455d85a090af516eeb9d.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=6jDx4S3panvmH2YpUT7UMQ7BUmQ%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第3张_编程好6博客")
使用组件
NPM使用示例。
<template>
<div id="app">
<x-button type="primary" @click="openHtmlDialog">弹窗插入html内容</x-button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
}
},
methods:{
openHtmlDialog(){
let that = this
this.$Dialog.default({
...
})
}
}
}
</scrip>![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第4张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-936a64855f004abaa4ca65c9ce6c01fe.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=Oee%2FgqWrr3GGyFQxK21ALJD8DwU%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第4张_编程好6博客")
xvue-ui同样支持CDN引入使用。
CDN使用示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xvue example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='https://cdn.jsdelivr.net/npm/xvue-ui@1.3.67/dist/xvue-ui.js'></script>
</head>
<body>
<div id="app">
<x-button type="primary" @click="openHtmlDialog">弹窗插入html内容</x-button>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods:{
openHtmlDialog(){
let that = this
this.$Dialog.default({
...
})
}
}
})
</script>
</body>
</html>提供了很多平时前端项目中需要用到的组件，需要的不可错过。
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第5张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-dc11fecf863d439da7755f63f35e4e0e.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=uKRKI5Q2zwEG1X5tZ6ZCF7svD10%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第5张_编程好6博客")
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第6张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-35c126ded0004adf827b445672118c90.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=o5%2BCmuUOGMThLWVbyz0dmOpMVFk%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第6张_编程好6博客")
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第7张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-29c259008ae04c0f9e5cb4041b826ed3.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=v9y5tFmHRyxgp7sJuBunXTxdmcI%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第7张_编程好6博客")
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第8张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-c6676bb7f5d44f66bfd0e0f1b3368a08.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=S60uG63kWzu%2FgN4FIPYiVQ1sawY%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第8张_编程好6博客")
![响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_https://bianchenghao6.com/blog_Vue_第9张](https://img.mushiming.top/app/bianchenghao6_com/2023-05-23-14b620b36be94b578f6fbd6ce71e9d68.jpg?_iz=58558&from=article.pc_detail&x-expires=1685461243&x-signature=WcJMHQ5%2F%2BIHdhLs9SGpG0UQUohc%3D "响应式 Vue.js 前端组件化框架Xvue-UI[亲测有效]_Vue_第9张_编程好6博客")
非常nice的一款开源组件式框架。如果感兴趣的话可以去看看哈！
# 文档地址
https://www.xvue.cn/
# 仓库地址
https://github.com/rohlin2019/xvue-uiok，今天就分享到这里。希望大家能喜欢~~
