微信小程序Vant Weapp组件部署与引用

微信小程序Vant Weapp组件安装@引用

  • Vant Weapp
    • 一.安装
      • 1.创建一个新的小程序
      • 2.开启npm模块及不校验合法域名
      • 3.修改project.config.json配置文件
      • 4.部署组件包
      • 5.构建npm
  • 组件测试

Vant Weapp

官网:

https://vant-contrib.gitee.io/vant-weapp

一.安装

1.创建一个新的小程序

微信小程序Vant Weapp组件部署与引用_第1张图片

2.开启npm模块及不校验合法域名

微信小程序Vant Weapp组件部署与引用_第2张图片

3.修改project.config.json配置文件

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

微信小程序Vant Weapp组件部署与引用_第3张图片

4.部署组件包

在小程序根目录输入:

npm i @vant/weapp -S --production

执行完成后生成一个node_modules文件夹如下图:
微信小程序Vant Weapp组件部署与引用_第4张图片

5.构建npm

点击小程序开发工具:工具→构建npm按钮等待完成.
微信小程序Vant Weapp组件部署与引用_第5张图片
完成后目录出现miniprogram_npm的文件夹代表整个安装过程已完成.
微信小程序Vant Weapp组件部署与引用_第6张图片

TIPS:如果构建npm过程报错可尝试在目录执行:

npm init -f

组件测试

建议引入文件直接在app.json编写方便全局调用。
微信小程序Vant Weapp组件部署与引用_第7张图片

1.各组件调用
微信小程序Vant Weapp组件部署与引用_第8张图片

你可能感兴趣的:(小程序组件部署,微信小程序,npm,小程序)