TDesign 微信小程序组件库配置

文章目录

    • 1.安装 npm 包
    • 2. 构建 npm
    • 3. 构建完成后即可使用 npm 包。
    • 4.修改 app.json
    • 5.修改 tsconfig.json
    • 6.使用组件

1.安装 npm 包

在小程序 package.json 所在的目录中执行命令安装 npm 包:

npm install

结果报错

PS C:\WeChatProjects\miniprogram-1> npm install
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名
称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。  
所在位置 行:1 字符: 1
+ npm install
+ ~~~+ CategoryInfo          : ObjectNotFound: (npm:String) [], Com  mandNotFoundException+ FullyQualifiedErrorId : CommandNotFoundException

发现 Node.js 没有安装。
在Node.js下载地址下载好再运行

重新安装 Node.js:

C:\Users\lenovo>node -v
v20.17.0C:\Users\lenovo>npm -v
10.8.2

检测已安装成功,再运行得到:

C:\WeChatProjects\miniprogram-1>npm install
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportedadded 217 packages in 6s65 packages are looking for fundingrun `npm fund` for details

2. 构建 npm

点击开发者工具中的菜单栏:工具 --> 构建 npm
在这里插入图片描述

3. 构建完成后即可使用 npm 包。

C:\WeChatProjects\miniprogram-1>npm i tdesign-miniprogram -S --production
npm warn config production Use `--omit=dev` instead.added 7 packages in 5s

4.修改 app.json

将 app.json 中的 “style”: “v2” 移除。
在这里插入图片描述

5.修改 tsconfig.json

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

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

6.使用组件

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

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

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

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

这些组件的代码链接

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/51747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode和edge浏览器等鼠标输入光标变透明

本人是AMD的APU会出现这种情况。它的gpu加速有些问题。 都是要关闭gpu硬件加速功能。edge浏览器好找。vscode是通过以下方法。 要关闭VSCode的硬件加速功能&#xff0c; ‌通过配置文件调整‌&#xff1a; 打开VSCode的设置&#xff08;通过按下CtrlShiftP或CmdShiftP打开命令…

【Qt】窗口概述

Qt 窗口概述 Qt窗口是由QMianWindow类来实现的。 QMainWindow 是⼀个为⽤⼾提供主窗⼝程序的类&#xff0c;继承⾃ QWidget 类&#xff0c;并且提供了⼀个预定义的布局。QMainWindow 包含 ⼀个菜单栏&#xff08;menu bar&#xff09;、多个⼯具栏(tool bars)、多个浮动窗⼝&a…

安全入门day.03

一、知识点 1、抓包技术应用意义 在渗透安全方面&#xff0c;通过抓包分析&#xff0c;安全人员可以模拟黑客的攻击行为&#xff0c;对系统进行渗透测试。这种测试有助于发现系统中存在的安全漏洞和弱点。一旦发现漏洞&#xff0c;可以立即采取措施进行修复&#xff0c;从而增…

分享8个Python自动化实战脚本!

1. Python自动化实战脚本 1.1 网络自动化 网络上有丰富的信息资源&#xff0c;Python可以帮我们自动化获取这些信息。 爬虫简介&#xff1a;爬虫是一种自动提取网页信息的程序。Python有许多优秀的爬虫库&#xff0c;如requests和BeautifulSoup。 案例&#xff1a;使用Pytho…

8.26 T4 日记和编辑器(fhq维护kmp——kmp本身含有的单射与可合并性)

http://cplusoj.com/d/senior/p/NOD2301D 前4个操作拿fhq treap是很好维护的。 对于最后一个操作&#xff0c;我们可以这么思考&#xff0c;从kmp的匹配思路出发&#xff1a; 如果我们知道一个串进入的指针 j j j&#xff08;也就是kmp匹配到的位置&#xff09;&#xff0c…

IT 行业的就业情况

当前&#xff0c;IT 行业的就业情况呈现出以下特点&#xff1a; 1. 需求持续增长&#xff1a;随着数字化转型的加速&#xff0c;各个行业对信息技术的依赖程度不断提高&#xff0c;推动了对 IT 人才的持续需求。特别是在云计算、大数据、人工智能、物联网等新兴领域&#xff…

MySQL:复合查询

MySQL&#xff1a;复合查询 聚合统计分组聚合统计group byhaving 多表查询自连接子查询单行子查询多行子查询多列子查询from子查询 合并查询unionunion all 内连接外连接左外连接右外连接全外连接 视图 MySQL 复合查询是数据分析和统计的强大工具&#xff0c;本博客将介绍如何使…

【WiFi主要技术学习2】

WiFi协议学习2 WiFi SPEC理解频段信道带宽协商速率安全与加密WiFi主要技术理解BP直接序列扩频(Direct Sequence Spread Spectrum,DSSS)BPSKQPSK正交幅度调制(Quadrature Amplitude Modulation,QAM)互补码键控(Complementary Code Keying,CCK)正交频分复用(Orthogonal…

Global Illumination_LPV Deep Optimizations

接上回&#xff0c;RSM优化技术介绍后&#xff0c;我们本部分主要看一下&#xff0c;光栅GI三部曲中的LPV&#xff0c;这个算法算是很巧妙了&#xff0c;算法思路基于RSM上拓展到世界空间&#xff0c;可以说很具学习和思考价值&#xff0c;之前也简单实现过Global Illumination…

利用session.upload_progress执行文件包含

1.session.upload_progress的作用&#xff1a; session.upload_progress最初是PHP为上传进度条设计的一个功能&#xff0c;在上传文件较大的情况下&#xff0c;PHP将进行流式上传&#xff0c;并将进度信息放在Session中&#xff08;包含用户可控的值&#xff09;&#xff0c;即…

Go 语言版本管理——Goenv

Go 语言版本管理——Goenv 命令安装 goenv安装和切换 Go 版本 goenv 是一个专门管理 Go 语言版本的工具。 命令 安装 goenv github-goenv git clone https://github.com/go-nv/goenv.git ~/.goenv echo export GOENV_ROOT"$HOME/.goenv" >> ~/.bash_profile…

CSAPP全书学习总结

CSAPP( 1.计算机系统漫游)学习笔记-CSDN博客 CSAPP&#xff08;第二章 信息的表示和处理&#xff0c;附上datalab解析_datalab调整数据位置-CSDN博客 CSAPP &#xff08;第三章&#xff1a;程序的机器级表示-CSDN博客

STM32嵌套向量中断控制器—NVIC

NVIC简介&#xff1a; NVIC&#xff0c;即Nested Vectored Interrupt Controller&#xff08;嵌套向量中断控制器&#xff09;&#xff0c;是STM32中的中断控制器。它负责管理和协调处理器的中断请求&#xff0c;是STM32中处理异步事件的重要机制。 NVIC提供了灵活、高效、可扩…

基于ssm的实习课程管理系统/在线课程系统

实习课程管理系统 摘 要 互联网的快速发展&#xff0c;给各行各业带来不同程度的影响&#xff0c;悄然改变人们的生活、工作方式&#xff0c;也倒逼很多行业创新和变革&#xff0c;以适应社会发展的变化。人们为了能够更加方便地管理项目任务&#xff0c;实习课程管理系统被人们…

python-变量声明、数据类型、标识符

一.变量 1.什么是变量 为什么需要变量呢&#xff1f; 一个程序就是一个世界&#xff0c;不论使用哪种高级程序语言编写代码&#xff0c;变量都是其程序的基本组成单位。如下图所示的sum和sub都是变量。 变量的定义&#xff1a; 变量相当于内存中一个数据存储空间的表示&#…

C语言刷题日记(附详解)(3)

一、选填部分 第一题: 以下的变量定义语句中&#xff0c;合法的是( ) A. byte a 128; B. boolean b null; C. long c 123L; D. float d 0.9239; 思路提示&#xff1a;观察选项时不要马虎&#xff0c;思考一下各种类型变量的取值范围&#xff0c;以及其初始化的形式是…

【并集查找 图论】2421. 好路径的数目

本文涉及知识点 C图论 LeetCode2421. 好路径的数目 给你一棵 n 个节点的树&#xff08;连通无向无环的图&#xff09;&#xff0c;节点编号从 0 到 n - 1 且恰好有 n - 1 条边。 给你一个长度为 n 下标从 0 开始的整数数组 vals &#xff0c;分别表示每个节点的值。同时给你…

easyExcel 导入时,校验每个单元格数据

目录 1、定义excel导入文件对应的数据接收类 2、定义属性转换器 3、定义数据解析监听器 4、解析文件 1、定义excel导入文件对应的数据接收类 package com.ruoyi.project.domain.dto;import com.alibaba.excel.annotation.ExcelProperty; import com.ruoyi.project.impot…

@antv/g6 业务场景:流程图

1、流程图是流经一个系统的信息流、观点流或部件流的图形代表。在企业中&#xff0c;流程图主要用来说明某一过程。这种过程既可以是生产线上的工艺流程&#xff0c;也可以是完成一项任务必需的管理过程。业务场景流程图如下&#xff1a; 2、绘制流程图的 Tips 流程图一般是用…

Vue -- 总结 02

Vue脚手架 安装Vue脚手架&#xff1a; 在cmd中安装(输入):npm install -g vue/cli 如果下载慢或下载不了&#xff0c;可以安装(cmd输入)淘宝镜像:npm config set registry https://registry.npmmirror.com 用命令创建Vue项目 在要创建的vue项目的文件夹里输入 cmd 回车 创…