微信小程序使用npm的步骤
发表时间:2020-10-19
发布人:葵宇科技
浏览次数:55
微信小程序使用npm的步骤
这里我们以npm引入小程序的官方UI组件weui-miniprogram为例
- 在小程序根目录内通过cmd,初始化npm 一路回车
npm init
- 在小程序中执行安装命令npm包 (weui-miniprogram):
npm install --save-dev weui-miniprogram
或
npm i @vant/weapp -S --production
- 构建npm包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件
- 修改app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。
- 引入组件 以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。
// 例 app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
- 引入组件
<van-button type="primary">按钮</van-button>