From 4e9a9da914a372f1b0f31cfcc7fbc2f96650ef58 Mon Sep 17 00:00:00 2001
From: Moonofweisheng <1780903673@qq.com>
Date: Tue, 8 Oct 2024 17:55:19 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=20=E4=BC=98?=
=?UTF-8?q?=E5=8C=96=E6=96=87=E6=A1=A3=E5=BF=AB=E9=80=9F=E4=B8=8A=E6=89=8B?=
=?UTF-8?q?=E7=AB=A0=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/guide/quick-use.md | 83 ++++++++++++++---------------------------
1 file changed, 29 insertions(+), 54 deletions(-)
diff --git a/docs/guide/quick-use.md b/docs/guide/quick-use.md
index 6a23f959..0c350584 100644
--- a/docs/guide/quick-use.md
+++ b/docs/guide/quick-use.md
@@ -2,26 +2,16 @@
本节介绍如何在`uni-app`项目中安装、配置并使用 `Wot Design Uni`。
+
+
+## 安装
:::warning 关于安装
`Wot Design Uni`提供了`uni_modules`和`npm`两种安装方式，按需选择。
- 使用`uni_modules`安装无需额外配置，即插即用，但是每次更新组件库需要处理代码差异（一般直接覆盖就可以）。
- 使用`npm`安装需要额外配置，更新组件库时无需处理代码差异。
:::
-## uni_modules 安装
-
-`Wot Design Uni` 支持 [uni_modules](https://uniapp.dcloud.net.cn/plugin/uni_modules.html#uni-modules) 规范，已经上架到 uni-app 的插件市场。
-
-在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将`Wot Design Uni`解压到uni_modules中，结构如下:
-```
-- uni_modules
-- - - wot-design-uni
-```
-
-下载地址：wot-design-uni
-
-
-## npm 安装
+### npm 安装
::: code-group
```bash [npm]
@@ -37,7 +27,28 @@ pnpm add wot-design-uni
```
:::
-### 配置easycom自动引入组件自动引入方案1
+
+### uni_modules 安装
+
+`Wot Design Uni` 支持 [uni_modules](https://uniapp.dcloud.net.cn/plugin/uni_modules.html#uni-modules) 规范，已经上架到 uni-app 的插件市场。
+
+在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将`Wot Design Uni`解压到uni_modules中，结构如下:
+```
+- uni_modules
+- - - wot-design-uni
+```
+
+下载地址：wot-design-uni
+
+
+## 配置
+
+### 导入组件
+::: tip 提醒
+使用 `uni_modules` 安装时`Wot Design Uni`的组件天然支持`easycom`规范，无需额外配置就可以自动引入组件，而使用 `npm安装 `需按照此步骤配置，以下两种方案二选一即可。
+:::
+
+#### 配置easycom自动引入组件方案1
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
只要组件路径符合规范（具体见[easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)），就可以不用引用、注册，直接在页面中使用。
@@ -63,12 +74,12 @@ pnpm add wot-design-uni
}
```
-### 基于vite配置自动引入组件自动引入方案2
+#### 基于vite配置自动引入组件方案2
如果不熟悉`easycom`，也可以通过[@uni-helper/vite-plugin-uni-components](https://github.com/uni-helper/vite-plugin-uni-components)实现组件的自动引入。
:::tip 提醒
- 推荐使用@uni-helper/vite-plugin-uni-components@0.0.9及以上版本，因为在0.0.9版本开始其内置了`wot-design-uni`的`resolver`。
-- 如果使用此方案时控制台打印很多`Sourcemap for points to missing source files`，可以尝试将vite版本升级至4.5.x。
+- 如果使用此方案时控制台打印很多`Sourcemap for points to missing source files`，可以尝试将vite版本升级至`4.5.x`以上版本。
:::
::: code-group
@@ -85,37 +96,6 @@ pnpm add @uni-helper/vite-plugin-uni-components -D
```
:::
-***@uni-helper/vite-plugin-uni-components 0.0.8及之前版本***
-```ts
-// vite.config.ts
-import { defineConfig } from "vite";
-import uni from "@dcloudio/vite-plugin-uni";
-
-import Components, { kebabCase } from '@uni-helper/vite-plugin-uni-components'
-
-export default defineConfig({
- plugins: [
- // make sure put it before `Uni()`
- Components({
- resolvers: [
- {
- type: 'component',
- resolve: (name: string) => {
- if (name.match(/^Wd[A-Z]/)) {
- const compName = kebabCase(name)
- return {
- name,
- from: `wot-design-uni/components/${compName}/${compName}.vue`,
- }
- }
- },
- }
- ]
- }), uni()],
-});
-```
-
-***@uni-helper/vite-plugin-uni-components 0.0.9及以后版本***
```ts
// vite.config.ts
import { defineConfig } from "vite";
@@ -133,7 +113,6 @@ export default defineConfig({
}), uni()],
});
```
-#### UI 组件类型提示
如果你使用 `pnpm` ，请在根目录下创建一个 `.npmrc` 文件，参见[issue](https://github.com/antfu/unplugin-vue-components/issues/389)。
@@ -145,7 +124,7 @@ public-hoist-pattern[]=@vue*
```
-## Volar 支持推荐
+## Volar 支持
如果您使用 `Volar`，请在 `tsconfig.json` 中通过 `compilerOptions.type` 指定全局组件类型。
:::tip
cli项目使用`uni_modules`安装无需配置，对`Volar`的支持自动生效，`HbuildX`项目不支持此配置，故此步骤仅在`cli`项目使用`npm`安装时需要配置。
@@ -166,7 +145,3 @@ cli项目使用`uni_modules`安装无需配置，对`Volar`的支持自动生效
``` html
```
-
-:::tip 提示
-使用uni_modules 安装时`Wot Design Uni`的组件天然支持`easycom`规范，无需额外配置就可以自动引入组件，而使用npm安装需要自行配置`easycom`或`@uni-helper/vite-plugin-uni-components`。
-:::