小程序使用Vant Weapp

也写了好几个小程序,但每次都是自己写的ui从来没用过相应的UI组件,想想也是不应该,于是趁此机会也就用一下。我这么懒,怎么一开始没用呢?可能那时候因为还没出来吧!

  1. 第一步 你像往常一样新建个项目,我就不教了。

  2. 第二步 找到你的项目文件夹 npm init 初始化一个叫package.json的文件一路回车即可。

  3. 第三步 继续执行命令安装 Vant Weapp
    npm i @vant/weapp -S --production

  4. 点击 开发者菜单里面的工具 >构建npm 如下图 很快就构建完了的


    image.png
  5. 还是开发者工具里面的详情 使用npm模块勾选上

image.png
  1. 删除一段 代码 添加一段代码
    添加的代码是:
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
image.png
  1. 最后就是在你的页面用使用了 如下图:


    image.png

结语:其它的组件也是这样引入的,不多讲了,整体来说,真的很简单,在此只是一个单纯的记录。

你可能感兴趣的:(小程序使用Vant Weapp)