This action will force synchronization from 周凯/vue3-pc-tmp, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
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配置文件
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。