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,一经查实,立即删除!

相关文章

【Qt】窗口概述

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

安全入门day.03

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

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;即…

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;分别表示每个节点的值。同时给你…

@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 回车 创…

基于Java的心灵治愈交流平台

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java语言&#xff1b;Spring Boot框架 工具&#xff1a;IDEA/Eclipse、Navicat 系统展示 首页 心…

学习资料销售平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;资料类型管理&#xff0c;学习资料管理&#xff0c;订单管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;学习资料&#xff0c;购物车&#xff0c;…

QT实现电子相册

使用带有UI界面的QWidget实现电子相册 1、实现功能 1、定时器的使用&#xff0c;在当前页面的停止总时长。 2、显示当前时间 3、图片的上一张与下一张 4、图片的显示 5、进度展示、一共十张图片、进度条的初始值为10。 2、widget.h #ifndef WIDGET_H #define WIDGET_H#i…

【微信小程序】SpringBoot集成微信小程序(多小程序集成)

SpringBoot集成微信小程序 前言一、前置工作1、获取appId和appSecret核心参数 二、SpringBoot集成微信小程序1、引入pom依赖2、yml配置3、java代码文件3.1、Properties 配置类3.2 Configuration 服务类 4、使用示例4.1、获取登录后的session信息&#xff1a;openId4.2、获取当前…

举办知识竞赛是线上好还是线下好

举办知识竞赛线上和线下各有优势&#xff0c;选择哪种方式取决于具体的需求和条件。 线上举办知识竞赛的优缺点&#xff1a; 优点&#xff1a; 便捷性&#xff1a;线上竞赛不受地域限制&#xff0c;参与者可以在任何有网络的地方参与。 选手数&#xff1a;可以同时满足人数较…

数据丢失?四款数据恢复免费版分享

作为一个办公室的文案策划人员&#xff0c;我深知数据的重要性。电脑里不仅有我辛辛苦苦撰写的文案&#xff0c;还有那些珍贵的创意灵感和客户资料。然而&#xff0c;就在上周&#xff0c;我因为一次不小心的误操作&#xff0c;把一个重要的文件夹给删除了。那一刻&#xff0c;…

基于web网上十字绣专营店设计与实现

&#xff08;一&#xff09;业务流程分析 没有实现网上销售的十字绣专营店&#xff0c;即店面销售方式&#xff0c;店面需要专人看管&#xff0c;而且销售范围有限&#xff0c;面向的对象很受限制&#xff0c;销售情况需要店主手工记录到账簿&#xff0c;以备利润汇总&#xf…