From 771d187d43426b87a9ff7b6f4521b254ae3dd2a2 Mon Sep 17 00:00:00 2001 From: rex Date: Thu, 6 Feb 2020 20:37:39 +0800 Subject: [PATCH] docs(quickstart): optimize quickstart (#2726) fix #2718 --- docs/markdown/quickstart.md | 38 ++++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/docs/markdown/quickstart.md b/docs/markdown/quickstart.md index 0d28e645..7260e6dd 100644 --- a/docs/markdown/quickstart.md +++ b/docs/markdown/quickstart.md @@ -8,6 +8,8 @@ ### 步骤一 通过 npm 安装 +需要注意的是 **package.json** 和 **node_modules** 必须在 **miniprogram** 目录下 + ```bash # 通过 npm 安装 npm i @vant/weapp -S --production @@ -25,6 +27,25 @@ npm i vant-weapp -S --production +### 步骤三 修改 tsconfig.json + +如果你使用 typescript 开发小程序,需要在 tsconfig.json 中增加如下配置,防止 npm 构建后 tsc 编译报错 + +```json +{ + "baseUrl": ".", + "paths": { + "@vant/weapp/*": ["./node_modules/@vant/weapp/dist/*"] + } + ... +} +``` + + +### 步骤四 修改 app.json + +将 app.json 中的 `"style": "v2"` 去除,小程序的[新版基础组件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。 + ### 示例工程 我们提供了一个[示例工程](https://github.com/youzan/vant-demo),示例工程会帮助你了解如下内容: @@ -34,18 +55,25 @@ npm i vant-weapp -S --production ## 使用 -### 在 app.json 中去除 "style": "v2" - -小程序给[新版基础组件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)强行加上了许多样式,难以去除,不关闭将造成样式混乱。 - ### 引入组件 以 Button 组件为例,只需要在`app.json`或`index.json`中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。 + + ```json +// 通过 npm 安装 // app.json "usingComponents": { - "van-button": "@vant/weapp/dist/button" + "van-button": "@vant/weapp/button" +} +``` + +```json +// 通过下载源码使用 +// app.json +"usingComponents": { + "van-button": "path/to/@vant/weapp/dist/button" } ```