快速开始

本节将介绍如何在项目中快速集成和使用 Versakit组件库。

完整引入

在应用入口文件中导入 Versakit：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { Versakit } from '@versakit/vue' // 引入组件库
import '@versakit/ui/style' // 引入样式

const app = createApp(App)

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

按需导入

自动导入

首先需要安装自动导入相关插件：

npm install -D unplugin-vue-components unplugin-auto-import @versakit/resolvers

Vite 配置

在 Vite 配置文件中添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VersakitResolver } from '@versakit/resolvers'
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [VersakitResolver()],
		}),
		Components({
			resolvers: [VersakitResolver()],
		}),
	],
})