郑州高铁数据大屏
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
柯萌 613ba76fef style(monitor): 样式调整 1 month ago
.husky Merge branch 'master' of ssh://devgit.starschina.com:1022/guoxinxin/gaotie_screen_web 3 months ago
.vscode 增加构建脚本 3 months ago
devops/nginx nginx 配置优化精简 3 months ago
locales init 3 months ago
mock init 3 months ago
presets chore(预加载): 预加载配置 3 months ago
public 提交read 3 months ago
scripts init 3 months ago
src style(monitor): 样式调整 1 month ago
.editorConfig init 3 months ago
.env feat(husky): git提交代码检查 3 months ago
.env.development feat(修改): 修改api相关 3 months ago
.env.production feat(修改): 修改api相关 3 months ago
.eslintignore feat(husky): git提交代码检查 3 months ago
.eslintrc.json init 3 months ago
.gitignore 头部文字样式修改 3 months ago
.prettierignore feat(husky): git提交代码检查 3 months ago
.prettierrc.json feat(husky): git提交代码检查 3 months ago
Dockerfile fix: nginx配置错误问题 3 months ago
LICENSE init 3 months ago
README.md feat(husky): git提交代码检查 3 months ago
build.sh 修改构建镜像错误 3 months ago
commitlint.config.js feat(husky): git提交代码检查 3 months ago
index.html init 3 months ago
package-lock.json feat(内容显示): 位置更换 3 months ago
package.json feat(监播): 监播组件 1 month ago
pnpm-lock.yaml chore(预加载): 预加载配置 3 months ago
tsconfig.json init 3 months ago
vite.config.ts init 3 months ago
windi.config.ts init 3 months ago
yarn.lock feat(监播): 监播组件 1 month ago

README.md

node 版本推荐

推荐使用 node 当前的长期维护版本 v16, 大于 v16.13.1 即可。




使用

不限定使用某一特定的包管理器,npm,yarn 和 pnpm 都行。同时注意 npm 的版本应该尽量的新。

  1. 安装依赖
pnpm install

# 或者 npm install
# 或者 yarn
  1. 开发
pnpm dev

# 或者 npm run dev
# 或者 yarn dev

# 开启 host
pnpm dev:host

# 或者 npm run dev:host
# 或者 yarn dev:host

# 自动打开浏览器
pnpm dev:open

# 或者 npm run dev:open
# 或者 yarn dev:open
  1. 预览
pnpm preview

# 或者 npm run preview
# 或者 yarn preview

# 开启 host
pnpm preview:host

# 或者 npm run preview:host
# 或者 yarn preview:host

# 自动打开浏览器
pnpm preview:open

# 或者 npm run preview:open
# 或者 yarn preview:open
  1. 打包
pnpm build

# 或者 npm run build
# 或者 yarn build
  1. 单元测试
pnpm test

# 或者 npm run test
# 或者 yarn test
  1. 单元测试报告生成
pnpm coverage

# 或者 npm run coverage
# 或者 yarn coverage
  1. 样式报告预览
pnpm analysis

# 或者 npm run analysis
# 或者 yarn analysis
  1. 样式报告打包
pnpm analysis:build

# 或者 npm run analysis:build
# 或者 yarn analysis:build
  1. 类型检查
pnpm typecheck

# 或者 npm run typecheck
# 或者 yarn typecheck
  1. 自动创建
pnpm auto:create

# 或者 npm run auto:create
# 或者 yarn auto:create
  1. 自动移除
pnpm auto:remove

# 或者 npm run auto:remove
# 或者 yarn auto:remove
  1. 依赖更新
# 安全版本更新
pnpm deps:fresh

# 或者 npm run deps:fresh
# 或者 yarn deps:fresh

# 主版本更新,可能是破坏性更新,谨慎使用,做好测试
pnpm deps:fresh:major

# 或者 npm run deps:fresh:major
# 或者 yarn deps:fresh:major

# 次版本更新,可能是破坏性更新,谨慎使用,做好测试
pnpm deps:fresh:minor

# 或者 npm run deps:fresh:minor
# 或者 yarn deps:fresh:minor

# 补丁版本更新
pnpm deps:fresh:patch

# 或者 npm run deps:fresh:patch
# 或者 yarn deps:fresh:patch
# 以上命令仅对包信息 package.json 进行写入,需要重新执行包安装命令
pnpm i

# 或者 npm i
# 或者 yarn
  1. 代码规范校验
pnpm lint

# 或者 npm run lint
# 或者 yarn lint

# 校验时修复

pnpm lint:fix

# 或者 npm run lint:fix
# 或者 yarn lint:fix


1. 文件路由

目录结构即路由。

eg:

  • src/pages/index.vue => /
  • src/pages/about.vue => /about
  • src/pages/users/index.vue => /users
  • src/pages/users/profile.vue => /users/profile
  • src/pages/users/[id].vue => /users/:id
  • src/pages/[user]/settings.vue => /:user/settings
  • src/pages/[...notFound].vue => 404 路由


2. Api 自动引入

vueapi 不需 import,直接使用。

目前支持自动引入 api 的库列表包括:

  1. vue
  2. vueuse
  3. vue-i18n
  4. vue-router

3. 组件自动引入

src/components 下定义的组件都将会按需引入,即 import 是不需要的

目前支持的组件库有:

vant idux devui quasar varlet inkline vuetify naive-ui primevue layui-vue view-design arco-design element-plus ant-design-vue @headlessui/vue tdesign-vue-next @vueuse/components


4. 图标自动引入

可前往 icones,随意选择点击进入其中一个图标库 即可直接用组件的形式直接使用,注意加上前缀 i-

<template>
	<i-mdi:account-box-multiple />
</template>

保存后等待自动下载该图标库后,就可以在页面中看到对应图标。

注意自动下载图标需要 pnpm 包管理器支持,是其他包管理器需要手动安装图标集 👇👇👇

图标集名称为 @iconify/: 前缀,例如上边的图标是 mdi:account-box-multiple,图标集名称就为 @iconify/mdi

npm i @iconify/mdi -D

# 或者 yarn add @iconify/mdi -D

具体可见 👉 unplugin-icons


5. 跳转进度条支持

跳转进度条由 nprogress 实现,可在src/styles/main.css 中调整配色。

/** src/styles/main.css **/

/** 省略其他样式 **/
#nprogress .bar {
	@apply bg-purple-700 bg-opacity-75; /** 配色 **/
}


6.gzip 资源压缩支持

生产环境下开箱即用的 gzip 资源压缩,无需配置。



7.环境变量配置支持

根目录下有三个环境变量配置文件 .env.env.development.env.production 用来对项目进行配置。



8.生产环境自动移除开发日志

生产环境下 console.logconsole.warnconsole.error 等日志会被自动移除掉,以避免开发时日志的泄漏。

Git 提交规范

  • 参考 vue 规范 (Angular)

    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

commit

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

type

代表某次提交的类型,比如是修复一个 bug 还是增加一个新的 feature。所有的 type 类型如下:

  • feat[特性]:新增 feature
  • fix[修复]: 修复 bug
  • docs[文档]: 仅仅修改了文档,比如 README, CHANGELOG, CONTRIBUTE 等等
  • style[格式]: 仅仅修改了空格、格式缩进、都好等等,不改变代码逻辑
  • refactor[重构]: 代码重构,没有加新功能或者修复 bug
  • perf[优化]: 优化相关,比如提升性能、体验
  • test[测试]: 测试用例,包括单元测试、集成测试等
  • chore[工具]: 改变构建流程、或者增加依赖库、工具等
  • revert[回滚]: 回滚到上一个版本

scope

scope 说明 commit 影响的范围。scope 依据项目而定,例如在业务项目中可以依据菜单或者功能模块划分, 如果是组件库开发,则可以依据组件划分。

subject

是 commit 的简短描述

body

提交代码的详细描述

如果代码的提交是不兼容变更或关闭缺陷,则 Footer 必需,否则可以省略。