微信开发者工具中安装TDesign组件库

我们在使用微信开发者工具时发现,Default的组件很少,如切换到TDesign组件库时发现该组件没有安装,提示如下:

微信开发者工具中安装TDesign组件库_第1张图片

当我们点击安装时,自动跳转到了TDesign的官网:

微信开发者工具中安装TDesign组件库_第2张图片

看着官网对TDesign组件库的介绍,这个组件库的组件非常丰富,很吸引开发人员,于是就有安装来试用的冲动。但官网的安装介绍,根本无法如愿以偿,于是经过两天的不懈努力,终于如愿将TDesign安装完成。

现将安装方法介绍如下:

  1. 首先到微信开发者工具官网下载微信开发者工具安装(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

  1. 到nodejs官网下载nodejs安装,因为要安装TDesign的话,要用到npm工具,npm工具是和nodejs一起打包发行的,故要下载nodejs安装(http://nodejs.cn/)。

  1. 打开微信开发者工具新建项目,项目名称及路径自己定义,如项目名称为phone_system,路径为K:\phone_system。

微信开发者工具中安装TDesign组件库_第3张图片
  1. AppID处填入开发者的ID,也可以用测试号,后端服务选着“不使用云服务”,模板选择“JavaScript-基础模板”(视个人熟悉的编程语言而定),点击“确定”。

微信开发者工具中安装TDesign组件库_第4张图片
  1. 找到项目存储的目录,如:K:\phone_system,进入项目文件夹,然后点击文件上方输入的框,在框中输入cmd,这样就能打开cmd的窗口。

微信开发者工具中安装TDesign组件库_第5张图片
  1. 在cmd的窗口中输入npm init,然后一直按回车至执行结束。

微信开发者工具中安装TDesign组件库_第6张图片
  1. 在cmd窗口中输入:npm i tdesign-miniprogram -S --production,然后回车。

微信开发者工具中安装TDesign组件库_第7张图片
  1. 点击“工具->构建npm”。

微信开发者工具中安装TDesign组件库_第8张图片
微信开发者工具中安装TDesign组件库_第9张图片
  1. 这样就可以使用TDesign组件库了。

微信开发者工具中安装TDesign组件库_第10张图片

你可能感兴趣的:(微信小程序,tdesign)