微信小程序的npm构建过程
为什么最近突然想写这个？其实这个东西我之前自己也做过研究记录，但是总容易忘记。所以今天写这篇文章不仅是给大家看的，也是给自己做个记录。
言归正传，我真想吐槽一下，不管是微信小程序还是vantWeapp的教程总是缺斤少两，缺的还是重要步骤，不要说不懂npm的新手，懂的人也要查半天，而且提示的错误和真正的问题还毫无关系。
接下来是正文步骤：
1.首先要安装npm
npm init -y
什么哪里运行命令行都不知道？好吧，送佛送到西，在这里……
这个步骤无论是微信小程序还是vant都没有教程，他默认你已经懂了，实际上就算有点基础的人也不一定知道这个步骤，因为安装vue这种类型的框架的时候都默认init好的。
如果这里没有这个步骤，运行npm命令会报错：
npm error code EPERM
npm error syscall mkdir
npm error path E:\
npm error errno -4048
npm error [Error: EPERM: operation not permitted, mkdir 'E:\'] {
npm error errno: -4048,
npm error code: 'EPERM',
npm error syscall: 'mkdir',
npm error path: 'E:\\'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It's possible that the file was already in use (by a text editor or antivirus),
npm error or that you lack permissions to access it.
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in: C:\Users\YS\AppData\Local\npm-cache\_logs\2024-11-29T08_35_32_187Z-debug-0.log
2.安装相关npm框架或者插件，我以vantWeapp做示例：
npm i @vant/weapp -S --production
3.构建npm
点击工具=》构建npm ，这里如果之前没有npm init 会报错：
message： NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList` appid: wx3756ff31cdce12f2 openid: o6zAJs4xKEicomJNkoiDeRf2e094 ideVersion: 1.06.2407110 osType: win32-x64 time: 2024-11-29 16:39:26
4.修改app.json
将 app.json 中的 "style": "v2" 去除。这里vant的官方文档有写，官方解释是：
小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
5.TS支持
这个以后写，这里先保留，先从JS版本开始教。
6.使用组件
在app.json或index.json中引入组件
在 app.json 中注册的组件为全局注册，可以在任意组件中进行使用
在 index.json 中注册组件为组件组件，只能在当前组件中进行使用
按照组件提供的使用方式，在页面中使用即可
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
然后使用组件
<van-button type="primary">主要按钮</van-button>
这时候再编译就可以用了。
发表评论