From c8dab860790c6ddaa08363375d29eb4f78edb360 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 15 Aug 2019 21:04:42 +0800
Subject: [PATCH] [Doc] update npm install guide (#1871)

---
 docs/markdown/quickstart.md | 33 +++++++++++++--------------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/docs/markdown/quickstart.md b/docs/markdown/quickstart.md
index f196e5aa..bd95709e 100644
--- a/docs/markdown/quickstart.md
+++ b/docs/markdown/quickstart.md
@@ -1,14 +1,12 @@
 # 快速上手
 
-### 使用之前
+### 背景知识
 
 使用 Vant Weapp 前，请确保你已经学习过微信官方的 [小程序简易教程](https://mp.weixin.qq.com/debug/wxadoc/dev/) 和 [自定义组件介绍](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。
 
 ## 安装
 
-### 方式一. 通过 npm 安装 (推荐)
-
-小程序已经支持使用 npm 安装第三方包，详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
+### 步骤一. 通过 npm 安装
 
 ```bash
 # 通过 npm 安装
@@ -18,30 +16,22 @@ npm i vant-weapp -S --production
 yarn add vant-weapp --production
 ```
 
-### 方式二. 下载代码
+### 步骤二. 构建 npm 包
 
-直接通过 git 下载 Vant Weapp 源代码，并将`dist`或`lib`目录拷贝到自己的项目中
-```bash
-git clone https://github.com/youzan/vant-weapp.git
-```
+打开微信开发者工具，点击 **工具 -> 构建 npm**，并勾选 **使用 npm 模块** 选项，构建完成后，即可引入组件
+
+<img style="width: 500px;" src="https://img.yzcdn.cn/public_files/2019/08/15/fa0549210055976cb63798503611ce3d.png" />
 
 ## 使用
 
 ### 引入组件
 
-以 Button 组件为例，只需要在`app.json`或`index.json`中配置 Button 对应的路径即可。某些小程序框架会要求关闭`ES6转ES5`选项，可以引入`lib`目录下 ES5 版本的组件。
+以 Button 组件为例，只需要在`app.json`或`index.json`中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 vant-weapp，请将路径修改为项目中 vant-weapp 所在的目录。
 
-#### ES6
 ```json
+// app.json
 "usingComponents": {
-  "van-button": "/path/to/vant-weapp/dist/button/index"
-}
-```
-
-#### ES5
-```json
-"usingComponents": {
-  "van-button": "/path/to/vant-weapp/lib/button/index"
+  "van-button": "vant-weapp/button"
 }
 ```
 
@@ -53,6 +43,8 @@ git clone https://github.com/youzan/vant-weapp.git
 <van-button type="primary">按钮</van-button>
 ```
 
+## 其他
+
 ### 在开发者工具中预览示例小程序
 
 ```bash
@@ -61,6 +53,7 @@ npm install
 
 # 执行组件编译
 npm run dev
+  
 ```
 
-打开[微信开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，导入`example`目录的项目就可以预览示例了。
+接着打开微信开发者工具，导入`example`目录的项目就可以预览示例了。