Teek Design Vue3

主题

Teeker2023-07-20
1379
6.3m
Get...

快速开始 ​

环境准备 ​

信息

  • Node.js 20.19.0 及以上版本（Vite 7 需要，如果您的 Node 版本低于 20.19.0 请降低版本到 Vite 6）
  • 在使用 Teek 前，要求至少会 Vue3 的基本使用

验证你的环境是否满足以上要求，你可以通过以下命令查看版本：

sh
# 出现相应 node 版本即可
node -v

建议使用如下包管理器安装：

VSCode 插件 ​

本项目推荐使用 VSCode/Cursor 进行开发，项目里面已内置 VSCode/Cursor 配置。

以下为推荐的插件：

代码获取 ​

完整版前端代码

sh
git clone https://github.com/Kele-Bingtang/teek-design-vue3.git
sh
git clone https://gitee.com/kele-bingtang/teek-design-vue3.git

精简版前端代码

sh
git clone https://github.com/Kele-Bingtang/teek-design-vue3-template.git
sh
git clone https://gitee.com/kele-bingtang/teek-design-vue3-template.git

警告

最新版本的代码以 GitHub 为准。

本地开发 ​

安装依赖

sh
pnpm install

编译运行

sh
pnpm dev

项目启动后自动打开浏览器，地址为：http://localhost:8099/。

项目打包 ​

打包运行（测试环境使用）

sh
pnpm build:test

打包运行（生产环境使用）

sh
pnpm build
# or
pnpm build:prod

NPM Scripts ​

json
{
  "scripts": {
    // 开发环境相关命令
    "dev": "vite --mode development", // 启动开发服务器
    "serve": "vite --mode development", // 启动开发服务器(别名)

    // 构建相关命令
    "build": "rimraf dist && vite build --mode production", // 清理并构建生产环境版本
    "build:prod": "rimraf dist && vite build --mode production", // 构建生产环境版本(别名)
    "build:test": "rimraf dist && vite build --mode test", // 构建测试环境版本

    // 预览相关命令
    "preview": "vite preview", // 本地预览构建结果
    "build:preview": "pnpm build && vite preview", // 构建并预览生产环境版本

    // 代码统计命令
    "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules", // 统计代码行数

    // 清理和重装命令
    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install", // 清理缓存并重新安装依赖

    // Git Hooks 相关命令
    "prepare": "husky", // 初始化 Git Hooks

    // 代码检查和格式化命令
    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js", // 对暂存区文件进行代码检查
    "lint:stylelint": "stylelint \"**/*.{vue,css,scss,postcss,less}\" --fix", // CSS 样式检查并自动修复
    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"", // 代码格式化
    "lint:eslint": "eslint --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix", // JavaScript/TypeScript 代码检查并修复
    "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint", // 执行所有代码检查

    // 版本发布相关命令
    "release": "standard-version", // 自动生成 CHANGELOG 和版本号
    "release-major": "standard-version --release-as major", // 发布 major 版本
    "release-minor": "standard-version --release-as minor", // 发布 minor 版本
    "release-patch": "standard-version --release-as patch", // 发布 patch 版本
    "release-as": "standard-version --release-as", // 指定版本号发布
    "release-prerelease": "standard-version --prerelease", // 发布预发布版本

    // Git 提交相关命令
    "cz": "git add . && git-cz", // 添加所有更改并使用 Commitizen 提交
    "czp": "git add . && git-cz && git push" // 添加更改、提交并推送
  }
}

开发流程 ​

一套简单的开发仅需两步：

  • 在 views 目录下开发您自己的 Vue 组件
  • 在 src/router/routesConfig.ts 里配置路由、角色等信息

Teek 会根据路由、角色等信息自动生成菜单栏、面包屑、标签页。

比如需要写一个登录组件，则在 views 下创建 login/index.vue，并在 index.vue 编写你的需求，然后在 src/router/routesConfig.ts 注册到路由里。

ts
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    meta: {
      title: "登录",
    },
  },
];

此时启动项目，就在左侧菜单栏看到 登录 菜单，点击就会跳转到你写的组件。

如果您不想出现在左侧菜单栏里，则使用 meta.hideInMenu 配置项：

ts
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    meta: {
      title: "登录",
      hideInMenu: true,
    },
  },
];

在 views 下开发组件的时候，必须要有根元素包起来，否则动画失效，从而导致路由切换失败，如下是错误的示例：

vue
<script setup lang="ts"></script>

<template>
  <div></div>
  <div></div>
</template>

注释也不行：

vue
<script setup lang="ts"></script>

<template>
  <div></div>
  <!-- <div></div> -->
</template>

正确的应该是使用根元素包起来：

vue
<script setup lang="ts"></script>

<template>
  <div>
    <div></div>
    <!-- <div></div> -->
  </div>
</template>

更多使用请往下阅读。