Small Tail Common

Appearance

开始使用 ​

安装 ​

bash
npm install st-common-ui-vue3
bash
yarn add st-common-ui-vue3
bash
pnpm add st-common-ui-vue3

使用 ​

提示

这里以使用 StPopover 组件为例，其它组件的使用方法请参考组件说明文档。

自动按需引入组件 ​

安装依赖 ​

bash
npm install unplugin-vue-components -D
bash
yarn add unplugin-vue-components --dev
bash
pnpm install unplugin-vue-components -D

配置自动按需引入组件 ​

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置按需自动加载组件的 Vite 插件
    Components({ 
      // 配置解析器，用于帮助按需自动加载组件的 Vite 插件解析并按需加载组件
      resolvers: [ 
        StCommonUIVue3Resolver() 
      ], 
    }) 
  ],
})
vue
<script setup lang="ts"></script>

<template>
  <!-- 使用 StPopover 组件 -->
  <StPopover>
    <!-- ... -->
  </StPopover>
</template>

提示

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

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

手动按需引入组件 ​

一次性引入所有组件样式 ​

js
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件库所有组件的样式
import 'st-common-ui-vue3/es/style.css'

createApp(App).mount('#app')
vue
<script setup lang="ts">
  // 引入 StPopover 组件
  import {StPopover} from "st-common-ui-vue3"
</script>

<template>
  <!-- 使用 StPopover 组件 -->
  <StPopover>
    <!-- ... -->
  </StPopover>
</template>

按需引入组件样式 ​

vue
<script setup lang="ts">
  // 引入 StPopover 组件
  import {StPopover} from "st-common-ui-vue3"
  // 引入 StPopover 组件样式
  import 'st-common-ui-vue3/es/components/StPopover/StPopover.css'
</script>

<template>
  <!-- 使用 StPopover 组件 -->
  <StPopover>
    <!-- ... -->
  </StPopover>
</template>

全局注册 ​

全局注册指定的组件 ​

js
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件库所有组件的样式
import 'st-common-ui-vue3/es/style.css'
// 引入指定组件的全局注册插件
import {StPopoverRegister} from "st-common-ui-vue3"

createApp(App)
    // 全局注册指定组件
    .use(StPopoverRegister) 
    .mount('#app')
vue
<script setup lang="ts"></script>

<template>
  <!-- 使用 StPopover 组件 -->
  <StPopover>
    <!-- ... -->
  </StPopover>
</template>

全局注册所有组件 ​

js
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件库所有组件的样式
import 'st-common-ui-vue3/es/style.css'
// 引入全局注册所有组件的插件
import {StCommonUiVue3} from "st-common-ui-vue3"

createApp(App)
    // 全局注册组件库所有组件
    .use(StCommonUiVue3) 
    .mount('#app')
vue
<script setup lang="ts"></script>

<template>
  <!-- 使用 StPopover 组件 -->
  <StPopover>
    <!-- ... -->
  </StPopover>
</template>