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

四、测试新页面

相关推荐
HUMHSX4 分钟前
Vue 项目启动全流程解析:从入口文件到全局指令注册与页面渲染
前端·javascript·vue.js
有颜有货15 分钟前
PMC生产排产的4种算法,一次讲清
java·服务器·前端
小虎牙00718 分钟前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由27 分钟前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an317421 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
谢尔登1 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户2136610035721 小时前
Vue商品详情与放大镜组件
前端·javascript
半个落月1 小时前
从Tapas小Demo理清localStorage、事件与this
前端·javascript
李明卫杭州1 小时前
Vue2 中 v-model 处理不同数据结构的技巧
前端·javascript·vue.js
李明卫杭州2 小时前
使用 computed 处理 v-model 复杂数据结构
前端·javascript·vue.js