实现微信小程序搭配——vant框架使用

---

一、项目初始化

如果项目初始化已完成可直接进入vant框架安装步骤

1.创建项目

2.删除不需要的文件

1.创建成功后，进入miniprogram

2. 删除miniprogram中不需要的文件夹
   
3. 删除以后

4. 再进入pages文件夹
   
5. 进入之后，除index.js文件其余全部删除
   
6. 然后进入最外层找到cloudfunctions文件夹
   
   

3.进入编辑器不需要的清理样式

1.找到pages文件下的index.wxml、index.wxss，清空里面所有样式和标签

2.找到pages文件下的index.js,然后进入先清空。

3.清空之后会报错，所以一定要在文件中输入page部署基础样式

4.完成之后效果一定要是这样。

5.弄完以后还会有错误，将pages文件夹下的index.json文件中usingComponents对象清空
6.这弄完还不行，所以要找到app.json把里面的不需要导入的路径删除


7.最后清空app.wxss样式

二、（正片开始）安装Vant 框架

1.安装环境

1.右击miniprogram到最下面，打开终端
注意：前提你主机已经装了nodejs

2.之后会生成package.json文件夹

3.打开官网Vant Weapp

4.复制代码这是会有node_modules生成

5.找到详情>本地设置现在 使用npm模块

6.再找到工具选择 构建npm

7.这时候也会出现行的文件夹

8.然后进入app.json文件

2.使用效果

1.引入组件


2.在pages文件下的index.wxml写入button按钮，效果就出来了