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.xdnf.cn/news/1523855.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

ARM32开发——(二十三)存储器介绍

1. 存储器分类 存储器按其存储介质特性主要分为“易失性存储器”和“非易失性存储器”两大类。 “易失/非易失”是指存储器断电后&#xff0c; 它存储的数据内容是否会丢失的特性。 在计算机中易失性存储器最典型的代表是内存&#xff0c;非易失性存储器的代表则是硬盘。 2.…

2024年最新版Ajax+Axios 学习【包含原理、Promise、报文、接口等...】

基础知识 AJAX概念 AJAX概念&#xff1a;是浏览器与服务器进行数据通信的技术。 认识URL 定义&#xff1a;统一资源定位符&#xff0c;简称网址&#xff0c;用于访问网络上的资源。 组成&#xff1a; http协议&#xff1a;超文本传输协议&#xff0c;规定浏览器和服务器之…

程序设计—基于JavaWeb的流浪动物救助网站(案例分析)

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息…

OpenAI API in node gives basic Await error. How do I fix?

题意&#xff1a;OpenAI API 在 Node 中出现基本的 Await 错误。我该如何修复&#xff1f; 问题背景&#xff1a; I literally copied the code from the openAI example and it gives me a remedial Await JS error but I am unsure what it expects me to do. I just want t…

【开源风云】从若依系列脚手架汲取编程之道(三)

&#x1f4d5;开源风云系列 &#x1f34a;本系列将从开源名将若依出发&#xff0c;探究优质开源项目脚手架汲取编程之道。 &#x1f349;从不分离版本开写到前后端分离版&#xff0c;再到微服务版本&#xff0c;乃至其中好玩的一系列增强Plus操作。 &#x1f348;希望你具备如下…

基于zigbee的蔬菜大棚温湿度监测系统(论文+源码)

1 系统的功能及方案设计 本次基于zigbee的蔬菜大棚温湿度监测系统主要包括传感器节点、协调器节点和监控中心三个功能模块。 其中协调器节点&#xff1a;由cc2530作为主控芯片&#xff0c;负责接收终端一和终端二发送过来的温湿度数据&#xff0c;并将其通过ch340串行转USB输…

【王树森】RNN模型与NLP应用(8/9):Attention(个人向笔记)

前言 基于RNN的Seq2Seq模型无法记住长序列Attentnion机制可以大幅度提升Seq2Seq模型 Seq2Seq Model with Attention Attention可以让句子在逐步变长的时候不忘记前面的输入信息Attention还可以告诉Decoder应该关注哪一个状态优点&#xff1a;Attention可以大幅度提高准确率缺…

【Java】实体类Javabean

文章目录 前言一、实体类Javabean是什么&#xff1f;二、代码总结 前言 记录实体类的基本语法 一、实体类Javabean是什么&#xff1f; 其实就是一种特殊形式的类&#xff0c;这种类特殊点在于&#xff1a; 1、这个类中的成员变量都要私有&#xff0c;并且要对外提供相应的ge…

Dubbo ZooKeeper Spring Boot整合

依赖配置 1. Dubbo 起步依赖 Dubbo 是一款高性能的 Java RPC 框架&#xff0c;用于快速开发高性能的服务。 <dependency><groupId>org.apache.dubbo</groupId><artifactId>dubbo-spring-boot-starter</artifactId><version>${dubbo.ver…

【功能自动化】使用HTMLTestRunner生成测试报告

配置环境&#xff1a; 部署webtours网站 准备数据 user.txt 在软件开发过程中&#xff0c;测试是非常重要的环节&#xff0c;通过测试可以验证代码的正确性和稳定性。而生成测试报告则是测试的一个重要环节&#xff0c;通过测试报告可以清晰地了解测试的结果、覆盖率等信息。…

第九届世界渲染大赛国内参赛者作品在哪里可以看?

第九届世界渲染大赛汇聚了全球顶尖的CG艺术家&#xff0c;其中国内选手的表现尤为引人注目。他们凭借独特的创意视角和精湛的技术&#xff0c;将浓郁的国风元素融入作品之中&#xff0c;为大赛增添了一抹独特的东方色彩。接下来&#xff0c;就让我们一探究竟&#xff0c;看看这…

datagrip链接sql server2005报错

错误信息 第一次报 DBMS: Microsoft SQL Server (no ver.) Case sensitivity: plainmixed, delimitedexact [08S01] 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。错误:“The server selected protocol version TLS10 is not accepted by client pr…

C++学习笔记----6、内存管理(一)---- 使用动态内存(4)

3.6、多维自由内存空间上的数组 如果需要在运行时决定多维数组的维度&#xff0c;可以使用在自由内存空间上的数组。与一维动态分配的数组通过指针访问一样&#xff0c;多维动态分配的数组也可以通过指针访问。不同的地方在于在二维数组中&#xff0c;需要用一个指向指针的指针…

基于精益六西格玛管理方法进行生产线综合改善

生产线精益六西格玛改善是一个系统工程&#xff0c;只有对其进行系统的策划与组织&#xff0c;才能收到良好的改善效果。一般来说&#xff0c;需要成立一个专门的精益六西格玛推进组织&#xff0c;由其完成一系列的组织、准备工作。具体如下&#xff1a; &#xff08;1&#xf…

详解si5338 si53xx 设计使用及STM32 iic驱动设计

背景 在实际项目中经常使用si5338 si53xx&#xff0c;进行多路时钟的倍频以生成想要的时钟信号&#xff0c;但是针对si5338 si53xx设计使用缺少相关的资料&#xff0c;本文详解si5338 si53xx 设计使用及STM32 iic驱动设计&#xff0c;本文使用工程在项目中得到测试&#xff0c…

【pycharm】汉化及翻译插件

汉化插件 翻译插件 使用 选中右键翻译

通信算法之232: 无线发射功率和信号强度,常用单位dB、dBm、dBi和dBd介绍

[转载] 无线功率和信号强度的基本概念 在无线网络中&#xff0c;使用AP设备和天线来实现有线和无线信号互相转换。如下图所示&#xff1a; 有线网络侧的数据从AP设备的有线接口进入AP后&#xff0c;经AP处理为射频信号&#xff0c;从AP的发送端&#xff08;TX&#xff09;经过…

DCMM认证等级以及费用多少?

DCMM&#xff08;数据管理能力成熟度&#xff09;特别适合拥有较多数据量的组织、以及期望在初期就进行数据管理规范的组织。它旨在帮助组织对象发现自身问题&#xff0c;为数据管理能力的建设和提升指明方向。 DCMM将组织的数据管理划分为 8大能力域&#xff0c;细分为28个能…

如何将代理IP设置为ISP:详细指南

在当今互联网时代&#xff0c;代理IP已经成为许多用户保护隐私和提升网络体验的重要工具。而ISP&#xff08;Internet Service Provider&#xff09;的代理IP更是因为其高质量和稳定性备受青睐。本文将详细介绍如何将代理IP设置为ISP&#xff0c;让你在网络世界中享受更优质的上…

如何在D盘创建虚拟环境?包括安装PyTorch和配置PyCharm

摘要&#xff1a;本文首先在D盘创建了虚拟环境&#xff0c;然后在虚拟环境中安装了PyTorch&#xff0c;最后配置了pycharm的解释器。 1. 在 D 盘创建虚拟环境 打开Anaconda Prompt 输入conda info --envs查看当前已有环境 创建自己的虚拟环境&#xff0c;打算命名为py310&…