快速开始

本节将介绍如何在项目中使用 YS-UI。

用法

插件依赖

使用 unocss 样式库，有对应的vscode插件，请自行安装 安装文档

css类名查找文档

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import YsInsideUi from 'ys-inside-ui'
import 'ys-inside-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(YsInsideUi)
app.mount('#app')

按需引入

// main.ts
import { YsPagination } from 'ys-inside-ui'
// 不管全局还是按需，都需要再主入口引入样式文件
import 'ys-inside-ui/dist/style.css'

app.vue

<!-- .vue文件引入 -->
<script setup lang="ts">
  import { YsTable, YsPagination, YsForm } from 'ys-inside-ui'
</script>

Volar 组件类型提示

如果您使用 Volar，组件已自动注册全局类型，无需额外配置 tsconfig.json。

提示

组件库会在安装时自动生成全局组件类型声明，在模板中使用组件时会获得完整的类型提示和属性校验。

自动导入（推荐）

配合 unplugin-vue-components 和 unplugin-auto-import 可以实现全自动按需导入：

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [
        // 自动导入 ys-inside-ui 组件
        (componentName) => {
          if (componentName.startsWith('Ys')) {
            return { name: componentName, from: 'ys-inside-ui' }
          }
        }
      ]
    })
  ]
}