uniapp中使用Tdesign

vue版本：V2

开发IDE：webStorm和微信开发者工具（习惯了webstorm，在使用HbuiderX时总是感觉不顺手）

1、webstorm中编写uniapp代码

1、下载插件

需要在webstorm中下载三个插件

1、Tdesign Mini Program (可有可无)

2、Uniapp Tool (必须要)

3、weChat Mini Program

插件截图

2、配置webstorm中下载的Uniapp插件

在Settings中的Tools下面的 Uniapp下

需要配置HbuiderX的安装目录和微信开发者工具的安装目录

配置截图

3、使用HbuiderX创建一个新的项目

选择V2版本

新建项目截图

4、创建项目后使用webstrom打开项目 在webstom中配置该项目的启动参数

选择以下参数

启动参数配置

5、启动项目

启动项目并且项目编译完成后会自动打开微信开发者工具并且显示uniapp的图标，出现该图标表示项目正常启动，后续编码即可正常进行

2、集成TDesign Mini Program

1、在该项目的根目录下创建文件夹

创建文件夹截图

2、在该项目下下载TDesign mini program

npm i tdesign-miniprogram -S --production

3、将下载后项目路径根目录中的node_modules中的tdesign-miniprogram中miniprogram_dist下的子文件复制到 wxcomponents中的tdesign文件夹中并且删除node_modules文件夹

复制后的截图

4、在项目中的page.json文件中按需引入需要使用的组件即可（组件路径为 创建的文件加组件的名称 在官网中复制替换即可）

截图

5、查看使用情况

在修改了page.json文件后需要重启一下项目

在tdesign 官网中 复制一个案列

1. 按需引入

   "usingComponents": {
     "t-button": "wxcomponents/tedsign/button/button"
   }
   

2. 在首页index中粘贴一下代码

   <view class="button-example">
     <t-button theme="primary" size="large">填充按钮</t-button>
   </view>
   

3. 重启代码

4. 查看效果

   引用成功截图

|