Small Tail Doc

外观

开始使用

1157 字约 4 分钟

2024-12-24

安装

npm
npm install st-common-ui-vue3

使用

自动按需引入

  1. 安装自动加载组件的插件
npm
npm install unplugin-vue-components -D
  1. 配置组件自动按需加载引入
vite.config.js | vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动加载组件的 Vite 插件
import Components from 'unplugin-vue-components/vite'
// 按需自动加载 st-common-ui-vue3 组件的解析器，用于帮助 unplugin-vue-components 自动按需加载 st-common-ui-vue3 组件
import {StCommonUIVue3Resolver} from "st-common-ui-vue3"

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置自动加载组件的 Vite 插件
    Components({ 
      // 配置解析器，用于帮助 unplugin-vue-components 解析并按需加载组件
      resolvers: [ 
        StCommonUIVue3Resolver() 
      ], 
    }) 
  ],
})
  1. 配置 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"
  ]
}
  1. 使用组件

这里以 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'
import { createApp } from 'vue'
import App from './App.vue'
  1. 按需手动引入组件后使用组件

这里以 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'
import { createApp } from 'vue'
import App from './App.vue'
  1. 在项目入口文件中全局注册组件库中的所有组件
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 组件库中所有组件的注册插件
import {StCommonUiVue3} from "st-common-ui-vue3"

createApp(App)
  // 全局注册组件库中的所有组件
  .use(StCommonUiVue3)
  .mount('#app')
  1. 使用组件

这里以 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'
import { createApp } from 'vue'
import App from './App.vue'
  1. 在项目入口文件中全局注册指定组件
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 组件的注册插件
import {StGhostTextHoverRegister} from "st-common-ui-vue3"

createApp(App)
  // 全局注册组件库中的 StGhostTextHover 组件
  .use(StGhostTextHoverRegister)
  .mount('#app')
  1. 使用组件
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>

贡献者

变更历史

最后更新于: 查看全部变更历史

  • 更新：图标选择器新增组件参数文档说明

    于 2025/1/4