首页 > 微信 > 详细

微信小程序生成package.json文件,在微信小程序中引入vant Weapp组件

时间:2020-11-05 16:40:51      阅读:128      评论:0      收藏:0      [点我收藏+]

1、微信小程序目录下没有package.json文件,这里需要用到packae.json文件;

技术分享图片

 

2、新建一个微信小程序,在小程序目录下 输入命令:npm init(记得以管理员身份运行开发工具),然后一直回车,直至在小程序目录下,生成package.json文件。

技术分享图片

3、通过npm安装,执行以下命令

       1:npm install --production

       2:# 通过 npm 安装

        npm i @vant/weapp -S --production

            # 通过 yarn 安装

         yarn add @vant/weapp --production

4、微信开发者工具中 构建npm包

4-1、点击构建npm

技术分享图片

 

 

 

4-2、勾选使用npm模块

 技术分享图片

 

 

 

5、修改 app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

6、引入组件

以 Button 组件为例,只需要在app.jsonindex.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

7、引入组件后,可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>


 vant Weapp官网     https://youzan.github.io/vant-weapp/#/quickstart

  

 

微信小程序生成package.json文件,在微信小程序中引入vant Weapp组件

原文:https://www.cnblogs.com/limengyin/p/13931734.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号