当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/29 12:24:42

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里配置路由：当点击左侧的菜单栏里新添加的目录时，显示页面的内容
在这里插入图片描述

四、测试新页面

在这里插入图片描述

相关文章：

  • upload-labs第十三关教程
  • 微信小程序地图功能详解
  • N32G031时钟配置
  • 《Unity3D高级编程之进阶主程》第一章 C#要点技术(二) - Dictionary 底层源码剖析
  • 【LeetCode 动态规划】买卖股票的最佳时机问题合集
  • 坚持刷题｜反转链表
  • 专业技能篇--算法
  • Es 索引查询排序分析
  • Cocos Creator，Youtube 小游戏！
  • C++ Primer 学习 -- Day 2
  • 麒麟系统mate_indicators进程占用内存资源高
  • c++的多态,继承,抽象类,虚函数表,虚函数等题目+分析
  • 5分钟了解单元测试
  • BUU CODE REVIEW 11 代码审计之反序列化知识
  • 【Python】类和对象的深入解析
  • Google 是如何开发 Web 框架的
  • 【Linux系统编程】快速查找errno错误码信息
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • Angular 4.x 动态创建组件
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • ES6系统学习----从Apollo Client看解构赋值
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • Js基础知识（四） - js运行原理与机制
  • LintCode 31. partitionArray 数组划分
  • orm2 中文文档 3.1 模型属性
  • spring boot 整合mybatis 无法输出sql的问题
  • springboot_database项目介绍
  • SQLServer之索引简介
  • Vue UI框架库开发介绍
  • 前端之Sass/Scss实战笔记
  • 入职第二天：使用koa搭建node server是种怎样的体验
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 问:在指定的JSON数据中（最外层是数组）根据指定条件拿到匹配到的结果
  • MyCAT水平分库
  • 阿里云ACE认证学习知识点梳理
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率！
  • ‌前端列表展示1000条大量数据时，后端通常需要进行一定的处理。‌
  • # 安徽锐锋科技IDMS系统简介
  • $ git push -u origin master 推送到远程库出错
  • （C）一些题4
  • (Matlab)使用竞争神经网络实现数据聚类
  • （Redis使用系列） Springboot 实现Redis 同数据源动态切换db 八
  • (webRTC、RecordRTC):navigator.mediaDevices undefined
  • （八十八）VFL语言初步 - 实现布局
  • （二）换源+apt-get基础配置+搜狗拼音
  • (二)原生js案例之数码时钟计时
  • （二）丶RabbitMQ的六大核心
  • （三）Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • （十） 初识 Docker file
  • (四)opengl函数加载和错误处理
  • （四）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • (一)、python程序--模拟电脑鼠走迷宫
  • （已更新）关于Visual Studio 2019安装时VS installer无法下载文件，进度条为0，显示网络有问题的解决办法
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)