美文网首页
小程序使用Vant Weapp

小程序使用Vant Weapp

作者: 微笑你的天下 | 来源:发表于2020-04-26 18:17 被阅读0次

    也写了好几个小程序,但每次都是自己写的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

          本文链接:https://www.haomeiwen.com/subject/gwujwhtx.html