微信小程序如何创建npm(超详细)

柔情只为你懂 2022-12-08 04:24 276阅读 0赞

# 微信小程序如何创建npm(超详细) #

> 大家好，今天我们来学习一下小程序如何创建npm，好好看，好好学，超详细的

## 第一步 ##

> 1. [**Windows下安装Node.js及环境配置**][Windows_Node.js]  
>  2. [**下载小程序开发工具**][Link 1]

## 第二步 ##

> 打开小程序开发工具，创建一个新的小程序，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 1]

## 第三步 ##

> 在本地找到你新建的小程序的根目录，并且进入，然后打开 **“cmd”**，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 3]

## 第四步 ##

> 安装好Node.js，输入 **"npm init "**，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 4]

## 第五步 ##

> 输入 **"npm i @vant/weapp -S --production"**（这里我安装的是[**Vant Weapp**][Vant Weapp]），如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 5]

## 第六步 ##

> 输入 **"npm i vant-weapp -S --production"**，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 6]

## 第七步 ##

> 打开小程序**选择构建npm**，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 9]

> 这样就可以使用了

## 结语 ##

> 关于微信小程序如何创建npm就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习

[Windows_Node.js]: https://blog.csdn.net/qq_43715354/article/details/108641727
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cdf474e5721f4ae984ec2b051f18cc02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/55aeb8976fa94e1581cd4f8d1762f3d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/c872cb097c804bf1a0edf9716d054750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/3e9827aa2ac34006937e6b62b3b4ced4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/f539a11a4aa94464b406e12356c87849.png
[Vant Weapp]: https://vant-contrib.gitee.io/vant-weapp/#/intro
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/bc1b9520080243f1a3a3bee00e8b5599.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/d38c383941694381bbc58c155a3a33f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/88e7601de07e4f10b75eee37f82e63a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/9f6b8379d5ac42bab05386a684191e74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/8e8b9058321547c5a30883106d3fb003.png