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

文章归档于：https://www.yuque.com/u27599042/row3c6

组件库地址

• 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 组件库