小程序中使用 npm

引入 Vant Weapp 为例:

通过 npm 安装

1. 在小程序目录下运行命令行 npm init -y 初始化

npm init -y

2. 安装 Vant Weapp

npm i vant-weapp -S --production

3. 打开微信开发者工具,在右上角 详情 > 本地设置 勾选使用 npm 模块

2FCB895F-C4EB-4c1c-B991-11DC1299F407.png

4. 点击 工具 > 构建 npm,构建完成就可以引入使用。
5. 引入组件并使用
以 Button 组件为例,在app.json中或者单独页面对应的json文件中配置路径。

"usingComponents": {
  "van-button": "vant-weapp/button"
}

在 wxml 中使用组件

<van-button type="primary">Button</van-button>
{DE4ADC48-5E26-4113-89D5-B95C908E353C}_20191015093337.jpg
通过 dist 文件夹引入

1.在git上下载对应文件 https://github.com/youzan/vant-weapp
2. 下载的文件中把 dist 目录拷贝到小程序目录下

{908B1214-A968-4E53-8549-62316DEAA144}_20191015094414.jpg

3. 引入方式及使用方法和之前相同,配置的时候路径需要调整

"usingComponents": {
  "van-button": "/dist/button/index"
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 运行命令 npm install --production-- node_modules必须在小程序根目录下,也可...
    蓝鲸_029c阅读 1,163评论 0 0
  • 第一步、首先我们需要打开小程序的npm构建功能 第二步、打开项目所在的文件夹,CMD到当前项目目录下,如果有安装了...
    子绎阅读 824评论 0 2
  • 微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下: ...
    无枉少年阅读 10,421评论 0 4
  • 1.开发前准备 开发微信小程序首先要注册一个账号([https://mp.weixin.qq.com/wxopen...
    光头小青蛙阅读 516评论 0 1
  • 理想是什么——风筝 青春是什么——线 风筝是什么——高度 线是什么——尺度 青春的尺度决定理想的高度 青春 在呼吸...
    家乡桃花开了阅读 296评论 0 2