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

Vedu • 2020-12-08 07:38 • 资源分享 • 阅读 1812

今天给小伙伴们推荐一款超不错的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使用示例。

html>
<html>
<head>
  <meta charset="utf-8">
  <title>xvue exampletitle>
    <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，今天就分享到这里。希望大家能喜欢~~

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/17127.html

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

说明

安装

引入组件

使用组件

相关推荐

发表评论