组件库配置与使用

组件库地址

• 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')