banner

快速开始 #

本节将介绍如何在项目中使用 KDesign Vue3。

用法 #

安装 #

npm i @kdocs/kdesign-vue3@latest

完整引入 #

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

`// main.ts import { createApp } from 'vue' import KD3Element from '@kdocs/kdesign-vue3' import '@kdocs/kdesign-theme/default.css' // KDesign 需要和主题搭配使用 import '@kdocs/kdesign-vue3/dist/index.css' import App from './App.vue'

const app = createApp(App)

app.use(KD3Element) app.mount('#app')`

Volar 支持 #

如果您使用 Volar，请在tsconfig.json中通过compilerOptions.type指定全局组件类型。

// tsconfig.json { "compilerOptions": { // ... "types": ["@kdocs/kdesign-vue3/global"] } }

按需导入 #

您需要使用额外的插件来导入要使用的组件。

自动导入 Recommend #

首先你需要安装 unplugin-vue-components, unplugin-auto-import and @kdocs/kdesign-vue3-auto-import-resolver 这三款插件。

npm install -D unplugin-vue-components unplugin-auto-import @kdocs/kdesign-vue3-auto-import-resolver

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite #

`// vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { KDesignVue3Resolver } from "@kdocs/kdesign-vue3-auto-import-resolver";

export default defineConfig({ // ... plugins: [ // ... AutoImport({ resolvers: [KDesignVue3Resolver()], }), Components({ resolvers: [KDesignVue3Resolver()], }), ], })`