TDesign 中后台系统搭建

一般如果希望开发小程序，是要给使用的用户提供一套中后台系统来管理数据的。现在中后台系统开源项目也比较多，本篇我们介绍一个腾讯开源的TDesign模板。

1 模板安装

先要在电脑里安装好nodejs，搜索官网，下载最新版本即可。

nodejs安装好之后，打开cmd，先安装cli

npm i tdesign-starter-cli -g

cli安装好之后，安装我们的模板，输入如下命令

td-starter init

选择vue3版本

我们先需要学习一下模板的使用，因此选择通用模板版本

2 启动项目

模板构建好之后，先需要进入安装目录，输入

cd ./tedisgn-vue-next

进入目录成功后安装依赖

npm install

启动项目

npm run dev

然后在浏览器里输入访问地址就可以看到项目的效果

3 添加页面

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

在pages目录下新建一个new-page文件夹，里边创建一个index.vue文件

页面的代码输入如下：

<template><div class="user-left-greeting"><div><span class="regular"> Hello world～</span></div></div></template>
<script lang="ts">
export default {name: 'NewPage',
};
</script><style lang="less" scoped>
</style>

然后在router/model目录下的user.ts里配置路由

import { LogoutIcon } from 'tdesign-icons-vue-next';
import { shallowRef } from 'vue';import Layout from '@/layouts/index.vue';export default [{path: '/user',name: 'user',component: Layout,redirect: '/user/index',meta: { title: '个人页', icon: 'user-circle' },children: [{path: 'index',name: 'UserIndex',component: () => import('@/pages/user/index.vue'),meta: { title: '个人中心' },},],},{path: '/loginRedirect',name: 'loginRedirect',redirect: '/login',meta: { title: '登录页', icon: shallowRef(LogoutIcon) },component: () => import('@/layouts/blank.vue'),children: [{path: 'index',redirect: '/login',component: () => import('@/layouts/blank.vue'),meta: { title: '登录中心' },},],},{path: "/new-page",title: "新页面侧边栏标题",component: Layout,redirect: "/new-page/index",meta:{title:'新页面',icon:'user-circle'},children: [{title: "新页面",path: "index",name:"NewPage",component: ()=> import('@/pages/new-page/index.vue'),meta:{title:'新页面'},},],},
];

这样我们就在左侧的菜单栏里新添加了一个目录，点击子菜单的时候显示页面的内容

总结

我们本篇介绍了TDesign中后台模板的安装和使用，选择一套稳定、持续更新迭代的模板是我们事业发展的基础，因为软件就是基于开源去构建。