Small Tail Common UI Vue3

Small Tail 前端通用 Vue3 UI 组件库

组件库文档

• https://small-tail-doc.netlify.app/
• https://tongchaowei.github.io/small-tail-doc/

组件库使用示例视频

• https://www.bilibili.com/video/BV1nQD3YvE5q/

安装

npm install st-common-ui-vue3

使用

自动按需引入

1. 安装自动加载组件的插件

npm install unplugin-vue-components -D

2. 配置组件自动按需加载引入

vite.config.js | vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动加载组件的 Vite 插件 // [!code ++]
import Components from 'unplugin-vue-components/vite' // [!code ++]
// 按需自动加载 st-common-ui-vue3 组件的解析器，用于帮助 unplugin-vue-components 自动按需加载 st-common-ui-vue3 组件 // [!code ++]
import {StCommonUIVue3Resolver} from "st-common-ui-vue3" // [!code ++]

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置自动加载组件的 Vite 插件 // [!code ++]
    Components({ // [!code ++]
      // 配置解析器，用于帮助 unplugin-vue-components 解析并按需加载组件 // [!code ++]
      resolvers: [ // [!code ++]
        StCommonUIVue3Resolver() // [!code ++]
      ], // [!code ++]
    }) // [!code ++]
  ],
})

3. 配置 TypeScript 代码提示

如果在你的项目中有使用 TypeScript，为了保证自动按需引入的组件能够被 TypeScript 正确识别，并且有相应的代码提示，那么我们需要==在 TypeScript 配置文件中添加== unplugin-vue-components 自动生成的包含==自动按需引入的组件的类型声明的文件 components.d.ts==。

components.d.ts 文件是在项目启动时由 unplugin-vue-components 自动生成，同时需要在项目中使用过至少一次组件并且启动运行项目访问页面后，相应的 st-common-ui-vue3 组件才会有相应的代码提示。

tsconfig.app.json

{
  "compilerOptions": {
    ...
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "components.d.ts" // [!code ++]
  ]
}

4. 使用组件

这里以 StGhostTextHover 组件为例。

App.vue

<script setup lang="ts">
</script>

<template>
  <div class="app">
    <div class="ghost-text-demo">
      <st-ghost-text-hover
        content="St Ghost Text Demo"
        horizontal-align="center"
        vertical-align="center"
      ></st-ghost-text-hover>
    </div>
  </div>
</template>

<style scoped>
.ghost-text-demo {
  padding: 2rem 1rem;
  font-size: 3rem;
  font-weight: bold;
}
</style>

手动按需引入

全局引入组件库完整样式后手动按需引入使用组件

1. 在项目入口文件中全局引入组件库的完整样式文件

main.js | main.ts

import 'st-common-ui-vue3/es/st-common-ui-vue3.css' // [!code ++]
import { createApp } from 'vue'
import App from './App.vue'

2. 按需手动引入组件后使用组件

这里以 StGhostTextHover 组件为例。

App.vue

<script setup lang="ts">
import {StGhostTextHover} from "st-common-ui-vue3"
</script>

<template>
  <div class="app">
    <div class="ghost-text-demo">
      <st-ghost-text-hover
        content="St Ghost Text Demo"
        horizontal-align="center"
        vertical-align="center"
      ></st-ghost-text-hover>
    </div>
  </div>
</template>

<style scoped>
.ghost-text-demo {
  padding: 2rem 1rem;
  font-size: 3rem;
  font-weight: bold;
}
</style>

手动按需引入组件和相应的样式后使用组件

这里以 StGhostTextHover 组件为例。

App.vue

<script setup lang="ts">
import {StGhostTextHover} from "st-common-ui-vue3"
import 'st-common-ui-vue3/es/components/StGhostTextHover/StGhostTextHover.css'
</script>

<template>
  <div class="app">
    <div class="ghost-text-demo">
      <st-ghost-text-hover
        content="St Ghost Text Demo"
        horizontal-align="center"
        vertical-align="center"
      ></st-ghost-text-hover>
    </div>
  </div>
</template>

<style scoped>
.ghost-text-demo {
  padding: 2rem 1rem;
  font-size: 3rem;
  font-weight: bold;
}
</style>

全局注册

全局注册所有组件

1. 在项目入口文件中全局引入组件库的完整样式文件

main.js | main.ts

import 'st-common-ui-vue3/es/st-common-ui-vue3.css' // [!code ++]
import { createApp } from 'vue'
import App from './App.vue'

2. 在项目入口文件中全局注册组件库中的所有组件

main.js | main.ts

import 'st-common-ui-vue3/es/st-common-ui-vue3.css'
import { createApp } from 'vue'
import App from './App.vue'
// st-common-ui-vue3 组件库中所有组件的注册插件 // [!code ++]
import {StCommonUiVue3} from "st-common-ui-vue3" // [!code ++]

createApp(App)
  // 全局注册组件库中的所有组件 // [!code ++]
  .use(StCommonUiVue3) // [!code ++]
  .mount('#app')

3. 使用组件

这里以 StGhostTextHover 组件为例。

App.vue

<script setup lang="ts">
</script>

<template>
  <div class="app">
    <div class="ghost-text-demo">
      <st-ghost-text-hover
        content="St Ghost Text Demo"
        horizontal-align="center"
        vertical-align="center"
      ></st-ghost-text-hover>
    </div>
  </div>
</template>

<style scoped>
.ghost-text-demo {
  padding: 2rem 1rem;
  font-size: 3rem;
  font-weight: bold;
}
</style>

全局注册指定组件

这里以 StGhostTextHover 组件为例。

1. 在项目入口文件中引入要全局注册的指定组件的样式文件

main.js | main.ts

import 'st-common-ui-vue3/es/components/StGhostTextHover/StGhostTextHover.css' // [!code ++]
import { createApp } from 'vue'
import App from './App.vue'

:::

2. 在项目入口文件中全局注册指定组件

main.js | main.ts

import 'st-common-ui-vue3/es/components/StGhostTextHover/StGhostTextHover.css'
import { createApp } from 'vue'
import App from './App.vue'
// st-common-ui-vue3 组件库中 StGhostTextHover 组件的注册插件 // [!code ++]
import {StGhostTextHoverRegister} from "st-common-ui-vue3" // [!code ++]

createApp(App)
  // 全局注册组件库中的 StGhostTextHover 组件 // [!code ++]
  .use(StGhostTextHoverRegister) // [!code ++]
  .mount('#app')

3. 使用组件

App.vue

<script setup lang="ts">
</script>

<template>
  <div class="app">
    <div class="ghost-text-demo">
      <st-ghost-text-hover
        content="St Ghost Text Demo"
        horizontal-align="center"
        vertical-align="center"
      ></st-ghost-text-hover>
    </div>
  </div>
</template>

<style scoped>
.ghost-text-demo {
  padding: 2rem 1rem;
  font-size: 3rem;
  font-weight: bold;
}
</style>