HBuilder x建小程序同时引用vant weapp组件的使用

van官方文档可参考
废话不多说今天在公司用HBuilder x建小程序同时引用vant组建
创建小程序成功后运行
运行-〉小程序模拟器-〉微信开发者工具
你是第一次启动要先去配置
1 复制微信开发者工具的路径

2工具-〉设置-〉运行配置



可以成功启动了

现在引入vant weapp组建
右键使用命令行打开
输入 npm安装
npm i vant-weapp -S --production
或者yarn安装
yarn add vant-weapp --production

注意：重要的一步

你会发现多了一个文件夹

新建文件wxcomponents专门管理vant weapp的组建
找到node_modules里面文件dist复制到新建的文件夹

现在可以删除node_modules文件夹了
可以引入button组件

在调用文件的开始调用

        <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">危险按钮</van-button>

说说遇到的坑：

这个路径一定要是3级路径不然会读取不到是不是很坑。