微信小程序如何使用npm

微信小程序如何使用npm

---

一、 npm的安装

1、什么是npm

    Npm(Node Package Manager) 是node的包管理工具，每个包都是一个模块，所以也可以说npm是node的模块管理工具。

    它让 JavaScript 开发者分享、复用代码更方便。

2、下载

    淘宝镜像地址：http://npm.taobao.org/

3、复制文件存放路径

    C:\Program Files\node-v9.7.0-win-x64（文件解压后的路径）

4、配置环境变量

    系统属性 - 高级 - 环境变量 - Path系统属性 - 高级 - 环境变量 - 系统变量-Path-编辑，把npm路径C:\Program Files\node-v9.7.0-win-x64添加到最后

5、npm安装完成，测试一下

    命令行输入 npm -v，如果有npm的版本号出来，说明安装成功。

---

二、 微信小程序如何使用npm

1、npm初始化

    在小程序的根目录文件夹里打开命令行，执行npm init -y，此时会产生一个package.json文件

2、安装npm包

    这里以vant-weapp(小程序UI组件库)为例：

    npm i @vant/weapp -S --production

3、npm包构建

    1：点击微信开发者工具右上角详情——>本地设置，选中使用npm模块

    2：点击微信开发者工具菜单栏的工具，选择构建npm

4、使用npm

    1：引入组件

    以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

    // app.json

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

2:使用组件

    引入组件后，可以在 wxml 中直接使用组件

    默认按钮

至此，在微信小程序里用npm引用vant组件完成。