Skip to content

Commit a0da88c

Browse files
normal-codernormal-coder
authored
docs: ✏️ fix create-uni command error (#874)
Signed-off-by: 诺墨 <normal@normalcoder.com>
1 parent 8f8cb10 commit a0da88c

1 file changed

Lines changed: 60 additions & 39 deletions

File tree

‎docs/guide/quick-use.md‎

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
# 快速上手
22

3-
本节介绍如何在`uni-app`项目中安装、配置并使用 `Wot Design Uni`。
3+
本节介绍如何在 `uni-app` 项目中安装、配置并使用 `Wot Design Uni`。
44

55
## 使用之前
6-
使用前，请确保你已经学习过Vue官方的 [快速上手](https://cn.vuejs.org/guide/quick-start.html) 和 uni-app提供的 [学习路线](https://uniapp.dcloud.net.cn/resource.html)。
6+
7+
使用前，请确保你已经学习过 Vue 官方的 [快速上手](https://cn.vuejs.org/guide/quick-start.html) 和 uni-app 提供的 [学习路线](https://uniapp.dcloud.net.cn/resource.html)。
78

89
## 安装
10+
911
:::warning 关于安装
10-
`Wot Design Uni`提供了`uni_modules`和`npm`两种安装方式，按需选择。
12+
13+
`Wot Design Uni` 提供了 `uni_modules` 和 `npm` 两种安装方式，按需选择。
14+
1115
- 使用`uni_modules`安装无需额外配置，即插即用，但是每次更新组件库需要处理代码差异（一般直接覆盖就可以）。
1216
- 使用`npm`安装需要额外配置，更新组件库时无需处理代码差异。
17+
1318
:::
1419

1520
### npm 安装
1621

1722
::: code-group
23+
1824
```bash [npm]
1925
npm i wot-design-uni
2026
```
@@ -26,25 +32,28 @@ yarn add wot-design-uni
2632
```bash [pnpm]
2733
pnpm add wot-design-uni
2834
```
29-
:::
3035

36+
:::
3137

3238
### uni_modules 安装
3339

3440
`Wot Design Uni` 支持 [uni_modules](https://uniapp.dcloud.net.cn/plugin/uni_modules.html#uni-modules) 规范，已经上架到 uni-app 的插件市场。
3541

36-
在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将`Wot Design Uni`解压到uni_modules中，结构如下:
37-
```
42+
在 `uni-app 插件市场` 选择使用 `HBuildX` 导入，或者选择手动在 src 目录下创建 uni_modules 文件夹并将 `Wot Design Uni` 解压到 uni_modules 中，结构如下：
43+
44+
```bash
3845
- uni_modules
3946
- - - wot-design-uni
4047
```
4148

42-
下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=13889"><span >wot-design-uni</span></a>
43-
49+
下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=13889"><span>wot-design-uni</span></a>
4450

4551
## Sass
52+
4653
`Wot Design Uni` 依赖 `sass` ，因此在使用之前需要确认项目中是否已经安装了 `sass`，如果没有安装，可以通过以下命令进行安装：
54+
4755
::: code-group
56+
4857
```bash [npm]
4958
npm i sass -D
5059
```
@@ -56,54 +65,63 @@ yarn add sass -D
5665
```bash [pnpm]
5766
pnpm add sass -D
5867
```
68+
5969
:::
6070

6171
::: warning 提醒
62-
`Dart Sass 3.0.0` 废弃了一批API，而组件库目前还未兼容，因此请确保你的`sass`版本为`1.78.0`及之前的版本。参见参见[常见问题](/guide/common-problems.html#sass抛出大量错误和警告)。
72+
`Dart Sass 3.0.0` 废弃了一批 API，而组件库目前还未兼容，因此请确保你的`sass`版本为`1.78.0`及之前的版本。参见参见[常见问题](/guide/common-problems.html#sass抛出大量错误和警告)。
6373
:::
6474

6575
## 配置
6676

6777
### 导入组件
78+
6879
::: tip 提醒
69-
使用 `uni_modules` 安装时`Wot Design Uni`的组件天然支持`easycom`规范，无需额外配置就可以自动引入组件，而使用 `npm安装 `需按照此步骤配置，以下两种方案二选一即可。
80+
使用 `uni_modules` 安装时 `Wot Design Uni` 的组件天然支持 `easycom` 规范，无需额外配置就可以自动引入组件，而使用 `npm 安装` 需按照此步骤配置，以下两种方案二选一即可。
7081
:::
7182

72-
#### 配置easycom自动引入组件<el-tag type="primary" style="vertical-align: middle;margin-left:8px;" effect="dark" >方案1</el-tag>
73-
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
83+
#### 配置 easycom 自动引入组件<el-tag type="primary" style="vertical-align: middle;margin-left:8px;" effect="dark" >方案 1</el-tag>
84+
85+
传统 vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
7486
只要组件路径符合规范（具体见[easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)），就可以不用引用、注册，直接在页面中使用。
7587

7688
:::tip 提醒
77-
- uni-app 考虑到编译速度，直接在`pages.json`内修改`easycom`不会触发重新编译，需要改动页面内容触发。
78-
- 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
89+
90+
- uni-app 考虑到编译速度，直接在 `pages.json` 内修改 `easycom` 不会触发重新编译，需要改动页面内容触发。
91+
- 请确保您的 `pages.json` 中只有一个 `easycom` 字段，否则请自行合并多个引入规则。
92+
7993
:::
8094

8195
```JSON
8296
// pages.json
8397
{
84-
"easycom": {
85-
"autoscan": true,
86-
"custom": {
87-
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
88-
}
89-
},
90-
91-
// 此为本身已有的内容
92-
"pages": [
93-
// ......
94-
]
98+
"easycom": {
99+
"autoscan": true,
100+
"custom": {
101+
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
102+
}
103+
},
104+
105+
// 此为本身已有的内容
106+
"pages": [
107+
// ......
108+
]
95109
}
96110
```
97111

98-
#### 基于vite配置自动引入组件<el-tag type="primary" style="vertical-align: middle;margin-left:8px;" effect="dark" >方案2</el-tag>
99-
如果不熟悉`easycom`，也可以通过[@uni-helper/vite-plugin-uni-components](https://github.com/uni-helper/vite-plugin-uni-components)实现组件的自动引入。
112+
#### 基于 vite 配置自动引入组件<el-tag type="primary" style="vertical-align: middle;margin-left:8px;" effect="dark" >方案 2</el-tag>
113+
114+
如果不熟悉 `easycom`，也可以通过 [@uni-helper/vite-plugin-uni-components](https://github.com/uni-helper/vite-plugin-uni-components) 实现组件的自动引入。
100115

101116
:::tip 提醒
102-
- 推荐使用@uni-helper/vite-plugin-uni-components@0.0.9及以上版本，因为在0.0.9版本开始其内置了`wot-design-uni`的`resolver`。
103-
- 如果使用此方案时控制台打印很多`Sourcemap for points to missing source files​`，可以尝试将vite版本升级至`4.5.x`以上版本。
117+
118+
- 推荐使用 `@uni-helper/vite-plugin-uni-components@0.0.9` 及以上版本，因为在 0.0.9 版本开始其内置了 `wot-design-uni` 的`resolver`。
119+
- 如果使用此方案时控制台打印很多 `Sourcemap for points to missing source files​` ，可以尝试将 `Vite` 版本升级至 `4.5.x` 以上版本。
120+
104121
:::
105122

106123
::: code-group
124+
107125
```bash [npm]
108126
npm i @uni-helper/vite-plugin-uni-components -D
109127
```
@@ -115,6 +133,7 @@ yarn add @uni-helper/vite-plugin-uni-components -D
115133
```bash [pnpm]
116134
pnpm add @uni-helper/vite-plugin-uni-components -D
117135
```
136+
118137
:::
119138

120139
```ts
@@ -135,21 +154,23 @@ export default defineConfig({
135154
});
136155
```
137156

138-
如果你使用 `pnpm` ，请在根目录下创建一个 `.npmrc` 文件，参见[issue](https://github.com/antfu/unplugin-vue-components/issues/389)。
157+
如果你使用 `pnpm` ，请在根目录下创建一个 `.npmrc` 文件，参见 [Issue](https://github.com/antfu/unplugin-vue-components/issues/389)。
139158

140-
```
159+
```text
141160
// .npmrc
142161
public-hoist-pattern[]=@vue*
143162
// or
144163
// shamefully-hoist = true
145164
```
146165

147-
148166
## Volar 支持
167+
149168
如果您使用 `Volar`，请在 `tsconfig.json` 中通过 `compilerOptions.type` 指定全局组件类型。
169+
150170
:::tip
151-
cli项目使用`uni_modules`安装无需配置，对`Volar`的支持自动生效，`HbuildX`项目不支持此配置，故此步骤仅在`cli`项目使用`npm`安装时需要配置。
171+
cli 项目使用 `uni_modules` 安装无需配置，对 `Volar` 的支持自动生效，`HbuildX` 项目不支持此配置，故此步骤仅在 `cli` 项目使用 `npm` 安装时需要配置。
152172
:::
173+
153174
```json
154175
// tsconfig.json
155176
{
@@ -159,20 +180,20 @@ cli项目使用`uni_modules`安装无需配置，对`Volar`的支持自动生效
159180
}
160181
```
161182

183+
## 使用
162184

185+
`Wot Design Uni` 安装、配置完成之后，支持组件自动引入，故可以直接在 SFC 中使用，无需在页面内 import，也不需要在 components 内声明，即可在任意页面使用。值得注意的是，`uni-app` 平台不支持全局挂载组件，所以 `Message`、`Toast` 等组件仍需在 SFC 中显式使用，例如：
163186

164-
## 使用
165-
`Wot Design Uni`安装、配置完成之后，支持组件自动引入，故可以直接在SFC中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，`uni-app`平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如:
166187
``` html
167188
<wd-toast></wd-toast>
168189
```
169190

170-
171191
## 脚手架
172-
我们提供了快速上手项目[wot-demo](https://github.com/Moonofweisheng/wot-demo)，它集成了`Wot Design Uni`和众多优秀插件，你可以直接克隆该项目。
192+
193+
我们提供了快速上手项目 [wot-demo](https://github.com/Moonofweisheng/wot-demo)，它集成了 `Wot Design Uni` 和众多优秀插件，你可以直接克隆该项目。
173194

174195
你也可以使用[create-uni](https://github.com/uni-helper/create-uni)，通过以下命令快速创建一个起手项目：
196+
175197
```bash
176-
pnpm create uni@latest <你的项目名称> -t wot
198+
pnpm create uni@latest -t wot-demo <你的项目名称>
177199
```
178-

0 commit comments

Comments
 (0)