坑.png
1. 安装前的准备:
需要nodejs环境,安装地址: nodejs
如果已经安装,检查版本,如果是正常的就可以
npm -v
node -v
错误:
cli npm v9.8.0 does not support Node.js v16.3.0. This version of npm supports the following node versions: ^14.17.0 || ^16.13.0 || >=18.0.0. You can find the latest version at https://nodejs.org/.
这里如果出现npm和node版本不匹配问题,解决办法:通过上面的官网重新下载,直接覆盖安装,网上一堆虚头巴脑的解决方案,我都尝试过,没搞定,直接覆盖安装解决;
下面是重建的TS 和 JS的小程序模板的安装方式.两种方式,安装是有所区别的.
2.TS模板安装Vant Weapp
步骤如下:
- 创建工程;
- cd到工程目录;
- 终端
npm init; - 终端
npm install; - 终端
npm i @vant/weapp -S --production; - 关闭工程,重启;
- 配置app.json ,将 app.json 中的 "style": "v2" 去除;
- 找到project.config.json文件,删除如下代码
"useCompilerPlugins": [
"typescript"
],
- project.config.json文件中添加如下代码:
,
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
- 终端执行
npm i tdesign-miniprogram -S --production - 把上面第
8步删除的project.config.json文件中useCompilerPlugins再补回来 - 项目中工具 -->构建npm;
-
确保你的代码的文件的层级关系和我的一致;如果你的miniprogram_npm和miniprogram是同级,直接把miniprogram_npm移动到miniprogram内.
image.png - 按照官网进行引入测试,这里的路径,使用官网的@vant/weapp/button/index没生效,修改如下:
"usingComponents": {
"van-button": "../../miniprogram_npm/@vant/weapp/button/index"
}
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
image.png
到此,集成完毕!
相较于TS,JS的集成相对简单
3.JS模板安装Vant Weapp
步骤如下:
- 创建工程;
- cd到工程目录;
- 终端
npm init; - 终端
npm install; - 终端
npm i @vant/weapp -S --production; - 关闭工程,重启(工程中要能加载出 node_modules 文件);
- 配置app.json ,将 app.json 中的 "style": "v2" 去除;
-
配置project.config.json
image.png - 构建npm;
-
引入button测试.
image.png
完成!
问题1: 运行直接报错找不到@vant/weapp/button/index
解决办法:尝试自己定位@vant的路径
问题2: 引入button后可以正常显示,但是丢失了CSS样式
解决: 关闭工程重新打开,再次进行 上面步骤的 步骤3 ,步骤4 ,步骤5即可;
问题3: 构建是找不到 project.json文件
解决:请先执行 npm init 构建一个project.json,创建过程可以直接回车;
