优秀的编程知识分享平台

网站首页 > 技术文章 正文

响应式 Vue.js 前端组件化框架Xvue-UI

nanyue 2025-01-11 15:53:36 技术文章 2 ℃

今天给小伙伴们推荐一款超不错的Vue轻量级组件框架XVueUI。

xvue-ui 基于vue2.x构建的响应式前端组件化框架。轻量级、易于上手，提供一系列丰富的css和js组件。

说明

  • 一款基于vue.js开发的响应式框架,包含丰富的css和js组件。
  • 除了基础组件，还提供了很多封装的大型组件。
  • 轻量级，语义化标签，上手简单。
  • 按需定制化很多专用组件。做到一个适用于任何应用的解决方案。

安装

$ npm i xvue-ui -S

引入组件

在main.js中引入组件。

import Vue from 'vue';
import xvueui from 'xvue-ui';
Vue.use(xvueui);

使用组件

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>

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>

提供了很多平时前端项目中需要用到的组件，需要的不可错过。

非常nice的一款开源组件式框架。如果感兴趣的话可以去看看哈！

# 文档地址
https://www.xvue.cn/

# 仓库地址
https://github.com/rohlin2019/xvue-ui

ok，今天就分享到这里。希望大家能喜欢~~

Tags：

猜你喜欢

最近发表
标签列表