docs: 完善按需引入文档

Author: kagol

packages/devui-vue/devui-cli/templates/vitepress-sidebar.js

@@ -54,6 +54,10 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
  text: '快速开始',
  link: '/quick-start/',
  },
+ {
+ text: '按需引入',
+ link: '/on-demand/',
+ },
  {
  text: '主题定制',
  link: '/theme-guide/',
@@ -68,6 +72,10 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
  text: 'Quick Start',
  link: '/en-US/quick-start/',
  },
+ {
+ text: 'On-demand Import',
+ link: '/on-demand/',
+ },
  {
  text: 'Theme Guide',
  link: '/theme-guide/',

packages/devui-vue/docs/on-demand/index.md

@@ -0,0 +1,53 @@
+# 按需引入
+
+除了全量引入，我们也支持单个组件按需引入。
+
+### 自动引入
+
+配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
+
+- 安装`unplugin-vue-components`插件
+
+```shell
+npm i -D unplugin-vue-components
+```
+
+- 在`vite.config.ts`文件中添加以下代码：
+
+```ts
+import Components from 'unplugin-vue-components/vite'
+import { DevUiResolver } from 'unplugin-vue-components/resolvers'
+export default defineConfig({
+ plugins: [
+ vue(),
+ // 新增
+ Components({
+ resolvers: [
+ DevUiResolver()
+ ]
+ })
+ ]
+})
+```
+
+配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
+
+## 手动引入
+
+在`src/main.ts`文件中写入以下内容：
+
+```ts
+import Button from 'vue-devui/button';
+import 'vue-devui/button/style.css';
+
+createApp(App).use(Button).mount('#app');
+```
+
+在`src/App.vue`文件的`<template>`中增加以下内容：
+
+```vue
+<template>
+ <!-- 使用 Button 组件 -->
+ <d-button>确定</d-button>
+</template>
+```

packages/devui-vue/docs/quick-start/index.md

@@ -20,21 +20,22 @@ npm create vite my-vue-app -- --template vue-ts
 
 ### 2. 安装
 
-进入你的项目文件夹，使用 NPM 安装`Vue DevUI`
+进入你的项目文件夹，使用 NPM 安装`Vue DevUI`和配套的图标库
 
 ```shell
-npm i vue-devui
+npm i vue-devui @devui-design/icons
 ```
 
 ### 3. 引入插件和样式
 
 在`src/main.ts`文件中写入以下内容
 
 ```ts
-import DevUI from 'vue-devui'
-import 'vue-devui/style.css'
+import DevUI from 'vue-devui';
+import 'vue-devui/style.css';
+import '@devui-design/icons/icomoon/devui-icon.css';
 
-createApp(App).use(DevUI).mount('#app')
+createApp(App).use(DevUI).mount('#app');
 ```
 
 ### 4. 使用
@@ -52,4 +53,12 @@ createApp(App).use(DevUI).mount('#app')
 
 ```shell
 npm run dev
-```
+```
+
+### 6 按需引入
+
+参考：[按需引入](/on-demand/)
+
+### 7 主题定制
+
+参考：[主题定制](/theme-guide/)

packages/devui-vue/docs/theme-guide/index.md

@@ -6,14 +6,14 @@
 
 内置主题：
 
-- 浅色主题`devuiLightTheme`（默认主题，`DevUI蓝`主题）
+- 浅色主题`devuiLightTheme`
 - 深色主题`devuiDarkTheme`
 - 绿色主题`devuiGreenTheme`
 - 绿色深色主题`devuiGreenDarkTheme`
 
 扩展主题：
 
-- 无限主题`infinityTheme`
+- 无限主题`infinityTheme`（默认主题）
 - 紫罗兰主题`provenceTheme`
 - 蜜糖主题`sweetTheme`
 - 深邃夜空主题`deepTheme`