我们在使用微信开发者工具时发现,Default的组件很少,如切换到TDesign组件库时发现该组件没有安装,提示如下:
![](https://i-blog.csdnimg.cn/blog_migrate/075451648c80c90e2e8e483803587a77.png)
当我们点击安装时,自动跳转到了TDesign的官网:
![](https://i-blog.csdnimg.cn/blog_migrate/a20c41418b3e5dbec0856f0d8d099115.png)
看着官网对TDesign组件库的介绍,这个组件库的组件非常丰富,很吸引开发人员,于是就有安装来试用的冲动。但官网的安装介绍,根本无法如愿以偿,于是经过两天的不懈努力,终于如愿将TDesign安装完成。
现将安装方法介绍如下:
首先到微信开发者工具官网下载微信开发者工具安装(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。
到nodejs官网下载nodejs安装,因为要安装TDesign的话,要用到npm工具,npm工具是和nodejs一起打包发行的,故要下载nodejs安装(http://nodejs.cn/)。
打开微信开发者工具新建项目,项目名称及路径自己定义,如项目名称为phone_system,路径为K:\phone_system。
![](https://i-blog.csdnimg.cn/blog_migrate/fc961d460cb8a4eafeee780747aad959.png)
AppID处填入开发者的ID,也可以用测试号,后端服务选着“不使用云服务”,模板选择“JavaScript-基础模板”(视个人熟悉的编程语言而定),点击“确定”。
![](https://i-blog.csdnimg.cn/blog_migrate/89aaacdfcd7e132ddbf890191fc7189c.png)
找到项目存储的目录,如:K:\phone_system,进入项目文件夹,然后点击文件上方输入的框,在框中输入cmd,这样就能打开cmd的窗口。
![](https://i-blog.csdnimg.cn/blog_migrate/d7e511e0b590872448bf146d69df81e6.png)
在cmd的窗口中输入npm init,然后一直按回车至执行结束。
![](https://i-blog.csdnimg.cn/blog_migrate/7571a1c03940d4a1352f61aa1c02aeb9.png)
在cmd窗口中输入:npm i tdesign-miniprogram -S --production,然后回车。
![](https://i-blog.csdnimg.cn/blog_migrate/bb2053969ab7b415188819be40c165c2.png)
点击“工具->构建npm”。
![](https://i-blog.csdnimg.cn/blog_migrate/e108b3c7e6dc0cd45627546f27e2a75c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/efd3c5f18460284395e54d42bbd8af9f.png)
这样就可以使用TDesign组件库了。
![](https://i-blog.csdnimg.cn/blog_migrate/98685b8604be0e3609bdc437f4ad3b40.png)