微信小程序(typescript) npm添加Tdesign UI组件库

最近，发现一个新的微信小程序UI组件库-TDesign。腾讯自家出品，颜值杠杆。网址如下：
https://tdesign.tencent.com/miniprogram/getting-started

安装

使用NPM

Node.js 安装包及源码下载地址为：https://nodejs.org/zh-cn/download/
Node.js 菜鸟教程网址：https://www.runoob.com/nodejs/nodejs-install-setup.html
检查npm是否安装成功

npm -version

在项目根目录上执行下面安装指令：

npm init
npm i tdesign-miniprogram -S --production

project.config.js值设置npm_dist目录

{"setting":{"packNpmManually":true,"packNpmRelationList":[{"packageJsonPath":"package.json","miniprogramNpmDistDir":"./miniprogram"}]}}

安装完之后，需要在微信开发者工具中对 npm 进行构建：工具 - 构建 npm

修改 app.json

将 app.json 中的 “style”: “v2” 移除。

修改 tsconfig.json

如果使用typescript开发，需要修改tsconfig.json指定paths

{"paths":{"tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]}}

使用组件

以按钮组件为例，只需要在 JSON 文件中引入按钮对应的自定义组件即可

{"usingComponents":{"t-button":"tdesign-miniprogram/button/button"}}

接着就可以在 wxml 中直接使用组件

<t-buttontheme="primary">按钮</t-button>