一般如果希望開發(fā)小程序，是要給使用的用戶提供一套中后臺系統(tǒng)來管理數(shù)據(jù)的?，F(xiàn)在中后臺系統(tǒng)開源項目也比較多，本篇我們介紹一個騰訊開源的TDesign模板。

1 模板安裝

先要在電腦里安裝好nodejs，搜索官網(wǎng)，下載最新版本即可。

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文件夾，里邊創(chuàng)建一個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: "新頁面?zhèn)冗厵跇祟}",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中后臺模板的安裝和使用，選擇一套穩(wěn)定、持續(xù)更新迭代的模板是我們事業(yè)發(fā)展的基礎，因為軟件就是基于開源去構建。