uniapp微信小程序引入vant组件库_uniapp引入vant

1、首先要有uniapp项目，根据vant官方文档使用yarn或npm安装依赖：

1、 yarn init 或 npm init 2、 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production

安装完依赖如下：

2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建：wxcomponents文件夹

必须是wxcomponents文件夹！
（原因：和微信开发者工具内部编译文件名一致）
3、将node_modules/@vant/weapp/下的dist文件夹复制粘贴到wxcomponents文件夹下（wxcomponents/dist）或者（wxcomponents/vant/dist）等等确保文件正确

 4、配置样式在App.vue文件中：

/*每个页面公共css *//* #ifdef MP-WEIXIN */@import \"/wxcomponents/dist/common/index.wxss\"; //路径要确保正确！！！！/* #endif */

 5、配置按需引入vant组件模块在pages.json文件夹中： 

\"globalStyle\": {\"navigationBarTextStyle\": \"black\",\"navigationBarTitleText\": \"uni-app\",\"navigationBarBackgroundColor\": \"#F8F8F8\",\"backgroundColor\": \"#F8F8F8\",\"usingComponents\": {\"van-button\": \"/wxcomponents/dist/button/index\",\"van-circle\": \"/wxcomponents/dist/circle/index\"}},

 6、使用引入的模块： 

运行结果：

代码：

默认按钮主要按钮信息按钮警告按钮危险按钮 export default {data() {return {value: 0, //进度gradientColor: { //渐变色\'0%\': \'#ffd01e\',\'50%\': \'#aa55ff\',\'100%\': \'#ee0a24\',},item: null,}},onUnload() {clearInterval(this.item)this.item = null},onLoad() {this.item = setInterval(() => {if (this.value >= 100) {this.value = 0return} else {this.value += 10}}, 1000)},methods: { }} .content {display: flex;flex-direction: column;align-items: center;justify-content: center;}

 本文为转载文章，仅供本人记录日常问题

原文链接：uniapp微信小程序引入vant组件库_uniapp怎么配置vant的按需导入-CSDN博客