uniapp 引入 Vant 从零开始

第一步

1、这里创建uniapp的项目 本人选择的是Vue2的

第二步

打开 Vant 官网 这里是使用Vant2的 切记别选择Vant3 不知道的可以点击 这里进入 Vant官网

点击上面的 微信小程序版本

进入这个界面后 点击 快速上手 这里是使用npm安装的

使用 cmd 打开创建文件的路径

将npm的命令复制进去执行 :

 npm i @vant/weapp -S --production

文件目录多了一个 node_modules文件

第三步 也是最重要的一步

将 vant 引入 uniapp 也是最重要的一步，本人查了一天的uniapp引入vant 结果文章基本都一个样的 各种报错

3.1、新创建个文件夹这里随意命名 本人命名是 wxcomponents 随着网上的来了

3.2、这里 打开 node_modules/@vant/weapp 将 weapp里的dist文件复制到 wxcomponents这个文件里面 最终的结果为：

打开 App.vue 引入：

	@import "/wxcomponents/dist/common/index.wxss";

最后打开 pages.json 根目录的 pages,json 别打开错了 将这段话输入进去:

	"usingComponents": {
			//这里是引入的组件  我是全局引入的  不想全局引入则在pages的路由下引入

			//这是引入的按钮
			"van-button": "wxcomponents/dist/button/index"
		}

最终结果

别一直看 要记得保存哦！检查好要运行的项目 然后运行看结果

大功告成！

如果还出错则可以去我得GitHub进行拉去：https://github.com/ZoeyMoney/uniapp-vant