广州协会网站建设,怀化做网站的公司,专做商铺中介网站,apache php mysql wordpress目录 1 模板安装2 启动项目3 添加页面总结 一般如果希望开发小程序#xff0c;是要给使用的用户提供一套中后台系统来管理数据的。现在中后台系统开源项目也比较多#xff0c;本篇我们介绍一个腾讯开源的TDesign模板。 1 模板安装
先要在电脑里安装好nodejs#xff0c;搜索… 目录 1 模板安装2 启动项目3 添加页面总结 一般如果希望开发小程序是要给使用的用户提供一套中后台系统来管理数据的。现在中后台系统开源项目也比较多本篇我们介绍一个腾讯开源的TDesign模板。 1 模板安装
先要在电脑里安装好nodejs搜索官网下载最新版本即可。
nodejs安装好之后打开cmd先安装cli
npm i tdesign-starter-cli -gcli安装好之后安装我们的模板输入如下命令
td-starter init选择vue3版本 我们先需要学习一下模板的使用因此选择通用模板版本
2 启动项目
模板构建好之后先需要进入安装目录输入
cd ./tedisgn-vue-next进入目录成功后安装依赖
npm install启动项目
npm run dev然后在浏览器里输入访问地址就可以看到项目的效果
3 添加页面
工程安装好之后用vs code打开我们的目录 在pages目录下新建一个new-page文件夹里边创建一个index.vue文件 页面的代码输入如下
templatediv classuser-left-greetingdivspan classregular Hello world/span/div/div/template
script langts
export default {name: NewPage,
};
/scriptstyle langless 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中后台模板的安装和使用选择一套稳定、持续更新迭代的模板是我们事业发展的基础因为软件就是基于开源去构建。
