微信小程序weui安装实战：NPM包最佳实践指南，快速构建UI组件库

微信小程序是一种轻量级的应用开发框架，它允许开发者在微信平台上构建原生体验的应用，而无需安装。在微信小程序开发过程中，为了实现丰富的用户界面和交互，常常需要引入第三方UI库，比如腾讯官方的WeUI。WeUI是微信官方设计团队为微信Web端量身打造的一套UI库，包含了一整套符合微信视觉规范的基础样式和组件。在微信小程序中，我们可以利用npm（Node Package Manager）来安装和管理这些第三方库。

一、构建NPM步骤

1.初始化

npm init

默认配置文件内容

2.安装指定包

npm i weui-miniprogram -S --omit=dev

错误提示

PS E:\miniprogram\weui-npm> npm i weui-miniprogram -S --production npm
WARN config production Use --omit=dev instead.

 npm i weui-miniprogram -S --omit=dev

3.工具构建NPM

4.项目调用

app.wxss

@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

5.特定页面使用

二、使用镜像加速 npm 安装过程

使用镜像加速 npm 安装过程是一个常见的做法，特别是在国内网络环境下。通过配置 npm 使用国内的镜像源来加快下载速度。以下是一些常用的镜像源及其配置方法：

1. 使用淘宝 NPM 镜像

淘宝 NPM 镜像是国内最常用的镜像之一。通过以下命令临时或永久切换到淘宝 NPM 镜像。

临时使用

在安装命令前加上 --registry 参数：

npm install tdesign-miniprogram --save --production --registry=https://registry.npmmirror.com

永久使用

你可以通过以下命令将默认的 npm 源切换为淘宝 NPM 镜像：

npm config set registry https://registry.npmmirror.com

验证是否切换成功：

npm config get registry

2. 使用其他镜像源

除了淘宝 NPM 镜像，还有一些其他的镜像源可以选择，例如：

• 京东 NPM 镜像：

  npm config set registry https://registry.mirrors.jenkins-ci.org
  

• 华为 NPM 镜像：

  npm config set registry https://mirrors.huaweicloud.com/repository/npm/
  

---

@漏刻有时