npm开发微信小程序--使用vantui 详解干货

更新微信开发者工具创建项目

• 1.创建项目 放在一个合适的文件夹中 没有APPID时 请点击测试号 或去注册一个
  
• 2.进入项目的根目录 npm init 一路回车

（要先npm init 初始化项目 否则会报错 官方文档中没有提到的东东）

（里面有git相关 后期需要git管理代码的 可以输入用户名和密码 后期参照官方文档git版本管理 管理代码）

• 3.npm install --production (简写 npm i) 安装npm包

• 4.打开微信开发者工具 点击工具 ->构建npm 结果构建失败（看来官方文档里面有坑啊）
  

-5.百度后 需要下载依赖 提示信息中的配置XX 感觉还是不懂

npm i miniprogram-sm-crypto --production

然后构建成功！

下载依赖

构建成功提示信息

文件解析

• 6.安装vantUI组件

npm i vant-weapp -S --production

下载vantUI组件
安装成功，点击工具->npm构建->构建成功会多个vant-weapp目录

新增文件夹

• 5.使用vantUI 之前 在app.js中加以下配置信息

"usingComponents": {

    "van-button":"miniprogram_npm/vant-weapp/button/index"

}

• 6.可以在页面中直接使用组件了 这时候一直报错 找不到vant 的控件
  

报错信息
解决办法：再次构建npm 就好了 对 就是这么。。。。。。

• 7.使用组件 数据使用双大括号 调用js 中 data的数据 这一点 和 vue中类似
  
  
  

最后

以上就是秀丽短靴为你收集整理的npm开发微信小程序--使用vantui 详解干货的全部内容，希望文章能够帮你解决npm开发微信小程序--使用vantui 详解干货所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。