同步操作将从 周凯/vue3-pc-tmp 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
vue3-pc-tmp 基于 Vue3.x setup + TypeScript + Vite + Pinia + naiveui + sass + unocss + axios(封装)+ Eslint + Prettier + dayjs 等流行技术栈构建 PC 端模板脚手架,开箱即用。
不支持 IE 浏览器。
Edge
、Firefox
、Chrome
、Safari
等现代浏览器的最新的 2 个版本确保会被支持。
对于这些浏览器的其他版本中,由于开发资源的限制并没有做过严格的测试。但是我预期 vue3-pc-tmp 应该在这些浏览器不算太老的版本上能正常的运行(比如 2 年之内的版本)。如果你发现了任何问题欢迎来提 issue。
#安装项目依赖
pnpm install
#开发环境启动
pnpm start
#打包 test 环境代码
pnpm build:test
#打包生产环境代码
pnpm build or pnpm build:prod
#执行 js 类型检查
pnpm lint:fix
#执行 prettier 批量格式化代码
pnpm lint:prettier
##注:详细请阅读package.json 以及对应的环境配置文件(即.env 文件)!
基础组件文件命名应该以 base 为前缀命名,以示其唯一性,并且以横线连接。
例子:
src
└─ resources
└─ components
└─ base-button
├─ index.vue //源码
└─ README.md //组件使用说明文档
业务组件文件命名应该以 the 为前缀命名,以示其唯一性,并且以横线连接。
例子:
src
└─ views
└─ components
└─ the-button
├─ index.vue //源码
└─ README.md //组件使用说明文档
为了方便维护与开发,建议路由文件命名与对应的页面文件命名保持一致,尽量简洁明了。
例子:
src
└─ config
└─ router
|- index.js
|- dev.js
|- home.js
为了方便维护与开发,建议接口文件命名与对应的页面文件命名保持一致,尽量简洁明了。
例子:
src
└─ config
└─ apis
|- index.js
|- home.js
为了方便维护与开发,建议以当前对应模块或者功能命名文件夹,采用驼峰命名或者烤肉串大小写,尽量简洁明了。
例子:
src
└─ config
└─ store
└─ dev
|- index.js
└─ home
|- index.js
建议图片文件夹命名与对应的页面文件命名保持一致,公共图片资源放置到 src/assets/img/base 目录下即可。
例子:
src
└─ assets
└─ img
|- index
|- dev
|- base
一般项目分主分支(master)和其他分支。 当有团队成员要开发新功能(Feather)或改 BUG(Fix) 时,就从 master 分支开一个新的分支。
版本号以 v 开头,根据当前仓库的 tag 编号进行累加,如:v1.10.45。
vue3-pc-tmp
├─ .env.development // 开发环境配置文件
├─ .env.production // 生产环境配置文件
├─ .env.test // 测试、灰度(预发布|预上线) 模式
├─ .eslintignore // eslint白名单
├─ .eslintrc-auto-import.json //
├─ .eslintrc.cjs // eslint配置文件
├─ .npmrc // npm配置文件
├─ .prettierrc.js // prettier配置文件
├─ .vscode // 覆盖默认vscode配置(项目级)
│ ├─ extensions.json //
│ └─ settings.json //
├─ env.d.ts // 环境类型声明文件
├─ index.html // templat模板
├─ package.json // 项目自述文件
├─ pnpm-lock.yaml // pnpm自锁文件
├─ public // 公共资源文件(不会hash处理)
│ └─ static // 静态资源目录
│ ├─ css //
│ ├─ img //
│ │ └─ favicon.ico //
│ └─ js //
├─ README.md // 项目使用说明文档
├─ src // 业务层
│ ├─ App.vue // 顶级router-view
│ ├─ assets // 静态资源(hash处理)
│ │ ├─ css // css放置目录
│ │ │ ├─ global.scss // 全局css
│ │ │ └─ reset.css // 重置css
│ │ ├─ img // 图片资源放置目录
│ │ └─ js // js资源放置目录
│ ├─ config // 业务配置目录
│ │ ├─ apis // 所以接口相关
│ │ │ ├─ dev // 接口切片
│ │ │ │ ├─ index.ts // 接口创建文件
│ │ │ │ └─ validation // 接口验证器相关
│ │ │ │ ├─ index.ts // 接口验证器统一导出文件
│ │ │ │ └─ module // 接口验证器切片
│ │ │ │ └─ getListDev.ts // 接口验证器核心文件
│ │ │ └─ README.md // 接口创建说明文档
│ │ ├─ router // 所有路由相关
│ │ │ ├─ dev.ts //
│ │ │ ├─ errpage.ts //
│ │ │ └─ index.ts //
│ │ └─ store // 状态商店(所有全局状态管理相关)
│ │ ├─ dev // store模块
│ │ │ ├─ index.ts // store核心代码
│ │ │ ├─ README.md // store 模块使用说明
│ │ │ └─ validation // ts 校验器
│ │ │ └─ index.ts //
│ │ └─ README.md // store模块创建说明
│ ├─ layout // 布局相关
│ │ ├─ app-main // app布局组件
│ │ └─ devLayout // 开发者中心布局组件
│ │ ├─ index.vue //
│ │ └─ leftMenu //
│ │ └─ index.vue //
│ ├─ main.ts // 入口js文件
│ ├─ packages // 依赖的第三方包或插件
│ │ ├─ request // axios请求库封装
│ │ │ ├─ cancel // 请求取消
│ │ │ │ ├─ index.ts //
│ │ │ │ └─ utils //
│ │ │ │ └─ generateReqKey.ts //
│ │ │ ├─ httpErrorStatusHandle // http错误处理
│ │ │ │ └─ index.ts //
│ │ │ ├─ index.ts // 请求库导出文件
│ │ │ ├─ loading // 请求库loading
│ │ │ │ └─ index.ts //
│ │ │ ├─ README.md // 请求库使用说明文档
│ │ │ ├─ retry // 请求重试
│ │ │ │ └─ index.ts //
│ │ │ └─ type // 请求库类型补充
│ │ │ └─ index.ts //
│ │ └─ router // vue-router封装
│ │ ├─ index.ts //
│ │ └─ routes.ts //
│ ├─ resources // 全局基础组件、全局插件、全局自定义指令配置
│ │ ├─ components // 全局基础组件
│ │ │ └─ base-form // 全局基础组件-form表单组件
│ │ │ ├─ components //
│ │ │ │ ├─ password-field //
│ │ │ │ │ └─ index.vue //
│ │ │ │ ├─ text-field //
│ │ │ │ │ └─ index.vue //
│ │ │ │ └─ textarea-field //
│ │ │ │ └─ index.vue //
│ │ │ ├─ index.vue //
│ │ │ └─ README.md // 全局基础组件-form表单组件使用说明文档
│ │ └─ plugin // 全局自定义插件
│ │ ├─ index.ts // 全局自定义插件导出文件
│ │ └─ message // 全局自定义插件-message
│ │ ├─ index.ts //
│ │ └─ README.md // 全局自定义插件-message使用说明文档
│ ├─ types // 全局类型补充文件
│ │ ├─ README.md //
│ │ └─ window.d.ts //
│ ├─ utils // 工具类
│ │ ├─ dayjs.ts // dayjs二次封装
│ │ ├─ getCurrentUrlAssignKey.ts // 获取 当前url 指定参数的值
│ │ ├─ handle-local.ts // 操作local
│ │ ├─ handle-session.ts // 操作session
│ │ ├─ regex-utils.ts // 正则工具函数
│ │ ├─ sleep.ts // 睡眠函数
│ │ └─ validate.ts // 校验器函数
│ └─ views // 视图层
│ ├─ components // 业务组件
│ │ └─ the-sendsms-button // 业务组件-发送短信验证码按钮
│ │ ├─ index.vue //
│ │ └─ README.md //
│ ├─ dev // 开发者中心相关视图
│ │ ├─ base //
│ │ │ ├─ form //
│ │ │ │ ├─ jiChuYongFa.vue //
│ │ │ │ └─ ziDingYiButton.vue //
│ │ │ └─ index.vue //
│ │ ├─ info //
│ │ │ └─ index.vue //
│ │ ├─ pinia //
│ │ │ └─ index.vue //
│ │ ├─ plugin //
│ │ │ └─ index.vue //
│ │ └─ unocss //
│ │ └─ index.vue //
│ ├─ errPage // 全局错误页
│ │ └─ err404.vue //
│ └─ index // 首页
│ └─ index.vue //
├─ tsconfig.app.json //
├─ tsconfig.config.json //
├─ tsconfig.json //
├─ tsconfig.vitest.json //
├─ unocss.config.js // unocss配置文件
└─ vite.config.ts // vite配置文件
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。