微信小程序中如何引用weUI（踩坑记录）

众所周知WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
在初学小程序开发时，我也想使用WeUI进行我的小程序开发，但是在初始化搭建的项目中引入WeUI花了我一个晚上的时间，终于成功引入WeUI。现在把我这一晚上踩过的坑做以下总结：

踩坑一：微信开发者工具的版本问题

根据WeUI官网提示，最新的 nightly 版开发者工具开始支持，同时基础库从支持 npm 的版本（2.2.1）起支持支持引用weui扩展库。

当我在引用不成功的时候首先查看自己的微信开发者工具的版本，果然不够高，然后我就开始了升级之路。根据微信开发者工具提示的更新，更新了一版nightly,没想到还是不行，然后继续更新～没完没了～

最后我直接从官网下载了稳定版 Stable Build (1.05.2203070）进行安装。

这里我想说的是，对于微信开发者工具的更新，最好使用官网直接下载更新到最新最稳定的版本，这里是真的不建议使用nightly版本进行开发，nightly版本需要经常进行更新，有时候真的很影响开发，就今晚，我明明按照提示立即更新了重新安装更新了软件，可是重新打开微信开发者工具的时候还是会提示安装，因为nightly版本是日常构建版本(基于 NW.js 0.49.3) ，用于尽快修复缺陷和敏捷上线小的特性；开发自测验证，稳定性欠佳。所以开发过程中还是使用稳定版本比较好。

微信开发者工具后安装WeUI

初始化项目中没有package.json 文件，首先在项目根目录下的空白处点击鼠标右键，然后选择“在外部终端窗口中打开”

在终端中输入命令生成package.json 文件

 npm init

然后执行命令安装weui 依赖包

npm install --save weui-miniprogram --production

执行完以上命令后，项目中将多出一个文件夹node_modules和package.json 文件

执行“工具” > “构建 npm ” 一直不成功问题

在上面操作执行完后，进行构建npm 依然不成功，提示如下：

根据提示，找到project.config.json中的packNpmManually和packNpmRelationList

将 “packNpmManually”: false,修改为true 也不成功。
最后将project.config.json中的"miniprogramRoot": "miniprogram/"删掉，然后再执行命令：

npm install

命令执行完后，再进行构建npm 此时成功在项目中生成了文件miniprogram_npm

以上操作完成后，就可以进行WeUI的使用了

如何使用WeUI将在下篇文章为大家详细讲解！

谢谢关注和阅读，希望能帮上大家～