mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 02:34:24 +08:00

* fix: layout ui fix

* fix: layout ui fix

Co-authored-by: pengYYYYY <pengyue970715@gmail.com>

2021-12-02 16:42:30 +08:00

4.2 KiB

Raw Blame History

TDesign Starter

项目简介

TDesign Starter 基于 TDesign UI 组件，旨在提供项目开箱即用的、配置式的并且拥有开发体验和设计感的中后台的项目。

设计美观
- 基于 TDesign UI 设计规范
- 提供 Figma、 Sketch、 Adobe XD、 Axure等多种类型的设计资源
- 在开源体系上打造具有自身品牌特色且好用的产品
完备路由
- 同时支持配置式路由和自定义路由
- 对于配置型路由，提供导航类组件的深度定制（“菜单 Menu”、“面包屑 Breadcrumb”），无需手动处理路由映射关系。
动态布局:
- 内置“左右布局”、“上左右布局”、“上下布局”等中后台常用布局，
- 页面内容基于 24 栅格布局设计，内置“常规型”和“紧凑型”两种间距模式
极速HRM:
- 采用 Vite 构建
- 开发环境下体验浏览器 esmodule bundless, 达到极速更新，无需等待漫长的 bundle 过程
开发规范:
- 统一规范会减少沟通成本，提高开发和维护的体验；
- 提交规范采用 Angular commit 规范
- 同时推荐采用 vscode 开发

项目脚本

// 安装依赖
npm install

// 启动项目
npm run start

// 项目构建 - 体验环境
npm run build:test

// 项目构建
npm run build

// 项目预览
npm run preview

// 项目lint
npm run lint

// 修复lint
npm run lint:fix

路由和菜单

菜单（侧边栏和面包屑）由路由配置自动生成，根据路由变化可自动匹配，开发者无需手动处理这些逻辑。可在src/config/routes.js文件中修改。

菜单和路由的映射如下：

    {
        path: '/dashboard',
        icon: 'chart-pie',
        title: '仪表板',
        component: '../layouts/default.vue',
        children: [
            {
                title: '概览仪表盘',
                path: 'base',
                component: '../pages/demo.vue',
                children: [            {
                    title: '概览仪表盘',
                    path: 'base',
                    component: '../pages/demo.vue',
                }]
            }
        ]
    }

路由使用 vue-router

布局

网站布局支持“空布局”， “侧边栏导航布局”， “侧边栏布局加头部导航”，“头部导航”四种；布局文件地址在src/layouts

更多定制化布局，推荐使用 TDesign UI layout

<t-layout>
<t-header>
<t-footer>
<t-aside>
<t-content>

提交规范

整齐美观的提交规范，沟通维护更加省力 Angular Git Commit Guidelines

兼容性

IE / Edge	Firefox	Chrome	Safari
Edge >=16	Firefox >=60	Chrome >=61	Safari >=11

4.2 KiB Raw Blame History Unescape Escape