目录
🇨🇳一. 作者有话说
微信小程序下载包和引入包的方式和vscode的差距还是很大的。我们需要进行几个步骤:
- 初始化项目
- 安装第三方包
- 使用npm模板
- 引用构建第三方包
- 调试运行
内容皆为原创,如果有认为有帮助,关注点一下可以吗。
❤️二. 打开终端的命令界面
🧡2.1 打开项目
编辑
💛2.2 打开终端
在资源管理器空白处右键,点开外部终端窗口打开。
编辑
💙三. 执行安装前的有关命令
💚3.1 输入命名: npm init -y
这里打开部分可能会出现没有权限的情况,可以去csdn查询一下怎么赋予权限。
正常情况是不会出现没权限的情况的,部分学校的机房可能会出现权限情况。
编辑
注意:这里如果显示没有权限
- 你可以去 csdn查一下如何更改权限
- 你可以不在小程序中打开终端,只要路径一样就可以了。
❤️3.2 判断是否安装成功
当输入 npm init -y 后会在文件夹中跳出来一个文件,有了pack.json说明成功了! 如下图所示:
编辑
💜四. 安装需要的包
到这一步没有结束,因为微信小程序的机制是安装完第三方包后还要进行构建项目才可以使用这个安装的第三方包
❤️4.1 终端中输入要安装的包的命令
这里我举个例子:安装vant weapp
npm i @vant/weapp -S --production
编辑
💙4.2 微信小程序经用包的命令
大家了解就可以了没必要是死记硬背
Vant Weapp - 轻量、可靠的移动端Vue组件库:
npm i @vant/weapp -S
Wx-Canvas - 微信小程序Canvas组件封装:
npm i wx-canvas -S
Dayjs - 轻量级的时间和日期处理库:
npm i dayjs -S
Axios - 基于promise的HTTP客户端,用于网络请求:
npm i axios -S
Echarts - 基于JavaScript的开源可视化图表库:
npm i echarts -S
Lodash - 一个一致性、模块化、高性能的JavaScript实用工具库:
npm i lodash -S
Moment.js - 一个轻量级的时间和日期处理JavaScript库:
npm i moment -S
Sentry - 错误监控和性能分析工具:
npm i @sentry/wechat-miniprogram -S
Wx-compute - 微信小程序计算属性:
npm i wx-compute -S
小程序请求库 - 微信小程序中使用的请求库,类似于axios:
npm i request -S
🧡五. 构建项目
💜5.1 如何构建项目
安装的npm在这个时候是不可以使用的,需要构建npm
编辑
💛5.2 构建完成后的标志
弹出框
编辑
💚5.3 去掉配置
为什么要去掉配置呢,因为安装的包可能会与默认的数据产生冲突,从而影响了渲染效果,因此,一定要执行去掉配置这一项!!!
编辑
找到下面代码去掉 !!
编辑
💚六. 注意事项【重要】
🧖♂️如果安装一个第三方包构建成功后,安装第二个包
编辑
🍓把上面的包卸载再重新构建,不然可能会出现一系列的问题。
虽然我不知道会出现什么问题,但是建议这么做。