[小尾巴 UI 组件库] 组件库配置与使用

这篇具有很好参考价值的文章主要介绍了[小尾巴 UI 组件库] 组件库配置与使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

文章归档于:https://www.yuque.com/u27599042/row3c6文章来源地址https://www.toymoban.com/news/detail-701730.html

组件库地址

  • npm:https://www.npmjs.com/package/xwb-ui?activeTab=readme
  • 小尾巴 UI 组件库源码 gitee:https://gitee.com/tongchaowei/xwb-ui
  • 小尾巴 UI 组件库测试代码 gitee:https://gitee.com/tongchaowei/xwb-ui-test

下载

  • npm
npm i xwb-ui
  • pnpm
pnpm i xwb-ui
  • yarn
yarn add xwb-ui

UI 样式配置

  • 在 main.js / main.ts 文件中,引入组件库 UI 样式
import 'xwb-ui/style.css' // 导入小尾巴 UI 样式

引入 UI 组件库

按需引入

import {
  // 组件名
} from 'xwb-ui'

完整引入

  • 通过 UI 组件库中内置的插件 XWB_UI,将组件库中所有组件注册为全局组件
import {createApp} from 'vue'
import App from './App.vue'

import 'xwb-ui/style.css' // 导入小尾巴 UI 样式
import XWB_UI from 'xwb-ui' // 导入将组件库中所有组件注册为全局组件的插件

const app = createApp(App)

// 使用 XWB_UI 插件
app.use(XWB_UI)

app.mount('#app')

各组件说明与使用

  • 对于各组件的说明与使用,请参考:[构建自己的 Vue 组件库] 小尾巴 UI 组件库

到了这里,关于[小尾巴 UI 组件库] 组件库配置与使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第5篇 vue的通信框架axios和ui框架-element-ui以及node.js

    axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端。 在浏览器中可以帮助我们完成 ajax请求的发送 在node.js中可以向远程接口发送请求 1.后端代码 2.前端代码 3.运行效果 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和

    2024年02月09日
    浏览(53)
  • 若依vue框架+element ui 组件路由跳转与菜单联动

    在后台管理系统中当点击某一按钮时,页面发生跳转(路由发生跳转,跳转到与按钮对应的页面),在跳转的同时在侧边栏中打开与之对应模块的菜单项 1.点击按钮跳转到/pay/PayIndex页面 2.在后台管理系统中侧边栏使用的是element ui 中的NavMenu导航菜单组件,在后台管理系统 src/l

    2024年02月14日
    浏览(53)
  • 【前端Vue】Element UI:一站式前端组件库的简单入门指南

    在现代的前端开发中,UI组件库扮演着至关重要的角色。它们为开发者提供了一套可重用的UI组件和工具,使得构建复杂的用户界面变得更加高效和便捷。在这篇文章中,我将向大家介绍Element UI,这是一个功能强大且易于使用的前端组件库。我将简单探讨Element UI的组件用法和

    2024年02月11日
    浏览(41)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(64)
  • Vue开发中使用Element UI过程中遇到的问题及解决方案Missing required prop: “value”,Element Plus全局组件配置中文

    一、vue中使用el-table的type=index有时不显示序号 Table 表格 用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。 当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以

    2024年01月16日
    浏览(57)
  • Java之Spring Boot+Vue+Element UI前后端分离项目,前端插件化主流框架和实现原理

    三、设置Axios发起请求统一前缀的路径 https://code100.blog.csdn.net/article/details/123302546 1、HelloWorld.vue getInfo() { this.$http.get(‘blog/queryBlogByPage?title=’ + this.title + ‘page=’ + this.page + ‘rows=’ + this.rows) .then(response = ( this.info = response.data, this.total = this.info.total, this.totalPage = this.info.tota

    2024年04月16日
    浏览(65)
  • 前端css + js +vue +element-ui 实现响应式布局,根据浏览器窗体大小自动响应

    我的环境是element-ui vue版的,其他的也可以,主要是css和js的内容 首先在data中定义一个对象 其实就是css的样式,不过放在了js 里面而已 这里css设置了两个属性 一个是transform 这个属性对div标签的缩放作用,当浏览器窗口或者屏幕大小改变时,就调整这个属性的值,来等比缩放

    2024年02月13日
    浏览(62)
  • 使用 Element UI 和 Vue.js 搭建电商商城系统

    作者:禅与计算机程序设计艺术 电商商城系统作为传统互联网行业的标杆,在近几年已经成为各大公司必不可少的业务系统之一。但是,构建一个成熟的电商商城系统仍然具有诸多挑战。例如,功能模块繁多、用户交互复杂、界面呈现效果丰富、数据量大等。为了解决这些问

    2024年02月08日
    浏览(48)
  • 【vue组件】使用element-ui 实现三级联动下拉选择

    实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容,依次类推 然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除(包括选择里的列表内容) 下面看具体代码: 效果图:

    2024年02月11日
    浏览(62)
  • TinyVue - 华为云 OpenTiny 出品的企业级前端 UI 组件库,免费开源,同时支持 Vue2 / Vue3,自带 TinyPro 中后台管理系统

    华为最新发布的前端 UI 组件库,支持 PC 和移动端,自带了 admin 后台系统,完成度很高,web 项目开发又多一个选择。 关于 OpenTiny 和 TinyVue 在上个月结束的华为开发者大会2023上,官方正式进行发布了 OpenTiny,这是华为云出品的企业级设计体系统,一套前端 UI 组件库。适配

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包