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里配置路由:当点击左侧的菜单栏里新添加的目录时,显示页面的内容

四、测试新页面

相关推荐
IT_陈寒12 分钟前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙12 分钟前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode12 分钟前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真12 分钟前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师12 分钟前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强12 分钟前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan13 分钟前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫13 分钟前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh13 分钟前
MCP 报错分不清?先看响应里是 result 还是 error
前端
呃呃呃呃ex13 分钟前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript