微信小程序中引用vant weapp

微信小程序学习之【引入第三方UI库Vant Weapp】

微信本身提供的UI库支持有限，为了让开发界面更丰富一些，决定引入有赞团队的UI库:Vant Weapp

安装Vant WeappUI库

对于新手来说，通过npm安装时，这里特别要注意这一句话：

就是说我们必须在miniprogram目录下运行npm命令，有二种方式：

1. 命令行窗口运行
   a. 运行cmd命令，cd 到指定目录，比如开发目录：D:\微信小程序开发\test
   b. cd -d “D:\微信小程序开发\test\miniprogram”
   c. npm init 或 npm -init -y
   d. 运行安装命令：npm i @vant/weapp -S --production
2. 通过微信小程序开发工具直接打开命令行窗口
   a. 工具的目录树里选中目录miniprogram
   则会自动出现命令窗口：
   
   [如果之前选中的目录路径不是miniprogram，则需cd到miniprogram目录，否则构建的时候会失败]
   b. 运行命令：npm init
   c. 运行安装命令：npm i @vant/weapp -S --production

引入到微信小程序中

1. 确保配置选中了使用npm模块
   

2. 构建刚刚安装的Vant Weapp npm包
   
   当出现这个窗口就意味着引入成功了
   

3. 如果出现任何错误，可以按以下步骤重新来一遍（这是万能万能步骤，任何时候引入都可以：项目开发初期，中期或需要重新引入）
   a. 关掉所有运行的微信小程序工具
   b. 删除相关文件
   1）命令行方式删除
   删除package-lock.json,package.json,node_modules,miniprogram_npm
   删除文件： del package*.json
   删除目录：
   rd /s /q node_modules
   rd /s /q miniprogram_npm
   2） Windows 中直接选中相应文件和目录删除
   c. 按照前面的步骤来一遍

开始使用Vant Weapp

1. 在.json文件中引入组件，

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  }
}

3. 在.wxml文件使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger" size="large">危险按钮</van-button>