TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统

TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统


一、安装Nodejs

下载:nodejs

注意,目前前端代码使用的vue3做为脚手架进行开发,需要强制依赖node版本为16及以上


二、模板安装

2.1 安装脚手架:cli

nodejs安装好之后,打开cmd,先安装脚手架:cli


2.2 通过tdesign提供的模板,创建/配置前端项目


2.3 安装前端项目所需依赖

找到项目的根目录,执行命令(选择一种安装方式):npm i | cnpm i | pnpm i | yarn | yarn install

此处,我选择使用cnpm 的方式来安装前端依赖(需要先安装cnpm)


2.4 启动前端项目


2.5 访问前端项目

通过tdesign提供的模板创建的前端项目中,提供的后端管理系统的基本模块,我们直接在这些基础模块上进行开发即可。

三、基于模板项目,开发一个测试页面

3.1 工程安装好之后,用vs code打开我们的目录


3.2 在现有项目中创建测试页面

在pages目录下新建一个dabing文件夹,里边创建一个index.vue页面文件


3.3 配置页面和菜单的对应关系

在router/modules目录下的user.ts里配置路由:当点击左侧的菜单栏里新添加的目录时,显示页面的内容

四、测试新页面

相关推荐
tedcloud1233 小时前
UI-TARS-desktop部署教程:构建AI桌面自动化系统
服务器·前端·人工智能·ui·自动化·github
UXbot6 小时前
AI原型设计工具如何支持团队协作与快速迭代
前端·交互·个人开发·ai编程·原型模式
ZC跨境爬虫7 小时前
跟着MDN学HTML_day_48:(Node接口)
前端·javascript·ui·html·音视频
PieroPc8 小时前
CAMWATCH — 局域网摄像头监控系统 Fastapi + html
前端·python·html·fastapi·监控
巴巴博一10 小时前
2026 最新:Trae / Cursor 一键接入 taste-skill 完整教程(让 AI 前端告别“AI 味”)
前端·ai·ai编程
kyriewen10 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
kyriewen10 小时前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog10 小时前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒11 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
lifejump11 小时前
Empire(帝国)CMS 7.5 XSS注入
前端·安全·xss