小程序笔记(一) – 引入VantUI

发布于 / Skill / 1 条评论

前言

因为公司要写小程序了 所以就提前熟悉小程序了 微信小程序的第三方UI库Vant的风格和设计都特别的棒 于是就引入使用了 在安装的过程中遇到了一些坑 于是就记下来当笔记啦

Step

  1. 首先先cd到小程序的目录 首先需要先执行npm init 快速初始化package.json

不初始化package.json的后果就是无法安装 报以下的错误

no such file or directory, open ‘/Volumes/Life/bgy/weapp/package.json’

执行npm init以后 需要填写一些必要的信息 如果没有什么需要特殊标记的 可以一路next

  1. 初始化以后 我们执行安装命令
# 通过 npm 安装
npm i vant-weapp -S --production

# 通过 yarn 安装
yarn add vant-weapp --production

官网有两种安装方式 第二种是通过下载文件引入的

因为日常用npm比较多 所以demo也是用npm进行安装的

安装成功就是如下图显示一样

  1. 安装成功以后 就是要在小程序里面构建npm了 否则无法引入使用

点击在微信开发者工具的 工具-构建npm

构建完成以后 文件目录下会多出一个miniprogram_npm的文件夹 这样就算成功构建了

  1. 接下来就要引入组件了 Vant给出了按需引入的方式去使用

在app.json或者index.json里面添加下面的代码即可 路径需要自己修改的 根据自己的目录去修改

ES6
"usingComponents": {
  "van-button": "miniprogram_npm/vant-weapp/button/index"
}
ES5
"usingComponents": {
  "van-button": "miniprogram_npm/vant-weapp/button/index"
}

  1. 引入组件以后 我们就可以使用Vant的组件了

大功告成啦

后记

第三方的框架感觉始终没有原生的稳定 于是尝试用原生+VantUI进行开发设计了

19/07/25
针针

转载原创文章请注明,转载自: 针针小站 » 小程序笔记(一) – 引入VantUI

  1. avatar

    好久不见~