微信小程序 第三方组件的运用 vant-weapp

小程序中使用别人开发的组件，需要借助node npm 等工具，从而让组件开发具备工程化和模块化。  以有赞的   vant-weapp 为例一下是具体步骤

vant-weapp 官方文档

1、桌面创建小程序项目   demo  在开发工具中打开

2、打开项目目录 在地址栏中输入 cmd 打开我们的命令行终端 (项目名称必须符合命名规则)

3、项目初始化 npm init -y 回车 在项目目录下会出现一个 package.json 的文件

4、下载 vant-weapp 框架 https://github.com/youzan/vant-weapp

• npm i vant-weapp -S --production 这个是安装 0.x版本

• npm i @vant/weapp -S --production 安装最新版本

5、构建小程序 npm

• 打开小程序开发工具，找到工具选项，点击构建npm （等待）
• 
• 击开发工具中的详情-->本地设置----->勾选使用npm
• 

6、项目根目录下会出现一个 miniprogram_npm 的文件夹

7、使用第三方组件

• 打开miniprogram_npm文件夹----@vant-----weapp  文件夹下的所有组件都可使用

•  在page-----index.json中注册   注意：两种路径都可以成功引入 "VantCheckbox" : "@vant/weapp/checkbox"  和  "VantCheckbox" : "../../miniprogram_npm/@vant/weapp/checkbox"    

•  在 index.wxml中使用

 

多使用几个