前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

微信小程序开发通过npm引入Vant Weapp组件流程

2021-08-12 08:36:35 来源:原创 作者:寂静的神经

一、初始化npm

在项目根目录下执行 npm init 命令,初始化项目,命令执行完毕后会在根目录下生成 package.json 文件。

注意:执行 npm init 命令后,不需要单独配置,全部回车一直到就可以。

二、通过 npm 安装 Vant Weapp

npm i @vant/weapp -S --production

三、修改 app.json

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

四、修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

五、构建 npm 包

打开微信开发者工具,点击 设置-> 项目设置,勾选 使用 npm 模块 选项。然后点击 工具 -> 构建 npm,构建完成后,即可引入组件。

六、使用

在项目的 app.json 或 页面的 index.json 中配置需要的组件对应的路径即可。

以 Button 组件为例:

// app.json 或 jindex.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

参考资料:

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-si-gou-jian-npm-bao

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#_2-%E6%9E%84%E5%BB%BA-npm

本文关键词:小程序 微信

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1