当前位置: 首页 > Web前端 > JavaScript

【微信小程序】如何在小程序中导入vantUI组件

时间:2023-03-27 11:57:03 JavaScript

简单记录下如何在微信小程序中导入vantUI组件(个人测试有效)以新建微信小程序项目为例。创建新小程序后,打开微信开发者工具,在打开的终端输入npmi@vant/weapp-S--production,回车。这时候在项目的根路径下会出现一个node_modules文件夹,如下图所示。如果没有出现文件夹,可以点击目录文件夹上的刷新按钮刷新列表2.完成node_modules依赖安装后,需要修改app.json文件如下,删除上图中选中的部分3.在项目根目录下新建一个package.json文件,文件位置和文件内容如下{"name":"mp-demo1","version":"1.0.0","license":"ISC","dependencies":{"@vant/weapp":"^1.0.6"},"prettier":{"printWidth":120,"semi":false,"singleQuote":true}}4.按照如下图步骤执行npm操作5、npm完成后,项目根路径下会出现一个miniprogram_npm文件夹,如下图,表示构建成功页面上引用UI组件:下面以一个按钮组件为例1.首先需要在app.json中定义全局组件的导入配置,如下图“usingcomponents":{"van-button":"@vant/weapp/button/index"},2.打开我们需要使用按钮组件的界面。下面以模板项目下的index页面为例,打开页面,在需要使用的地方添加如下标签(具体标签参考方法请参考官网文档)官网文档主按钮ctrl+s,页面会出现刚才引用的按钮组件的效果,大致效果如下图---就这些。文中如有不妥之处,欢迎指出,感谢阅读。