911c732721 | ||
---|---|---|
.vscode | ||
public | ||
src | ||
.env | ||
.env.production | ||
.eslintignore | ||
.eslintrc.cjs | ||
.gitattributes | ||
.gitignore | ||
.nvmrc | ||
.prettierignore | ||
.prettierrc.mjs | ||
Caddyfile | ||
Dockerfile | ||
LICENSE | ||
README.md | ||
env.d.ts | ||
index.html | ||
netlify.toml | ||
nginx.conf | ||
package.json | ||
pnpm-lock.yaml | ||
tsconfig.app.json | ||
tsconfig.json | ||
tsconfig.node.json | ||
typed-router.d.ts | ||
vercel.json | ||
vite.config.ts |
README.md
Kenko Drive Vue Frontend
我的云盘 Vue 前端
[!IMPORTANT] 该项目仅为个人学习项目,不具备商业使用价值,仅供学习交流。
相关 | 链接 |
---|---|
GitHub仓库 | github.com/AkagiYui/KenkoDriveVue |
GitLink中国大陆仓库 | gitlink.org.cn/AkagiYui/KenkoDriveVue |
在线演示地址 | drive.akagiyui.com |
后端仓库 | github.com/AkagiYui/KenkoDrive / 中国大陆镜像仓库 |
功能点
此处仅列出前端部分特有的功能点,业务相关功能请查看后端仓库。
使用的库
- Vue 3: JavaScript 框架
- Vite 5: 构建工具
- Naive UI: UI 组件库
- Pinia: 状态管理
- TypeScript: 类型检查
- ESLint: 代码检查
- Prettier: 代码格式化
- Axios: HTTP 请求
- Vue Router: 路由管理
- ArtPlayer: 视频播放器
- vue-pdf: PDF 阅读器(PDF.js封装)
- VueUse: Vue 工具库
- mitt: 事件总线
- vue-office: Office 预览
- shiki: 代码高亮
- filesize: 文件大小格式化
- marked: Markdown 渲染
- Monaco Editor: 代码编辑器
- normalize.css: 样式统一
- unplugin-vue-router: 基于文件的路由配置
- unplugin-auto-import: 自动导入
- vite-plugin-ms-clarity: Clarity统计
- aplayer: 音频播放器
- Fetch Event Source 更好的SSE支持
- zbar-wasm: 二维码识别
TODO
- feat: 国际化Vue I18n
- feat: 无障碍图标
- feat: 图片裁剪vue-cropper
- feat: 支持PWAPWA Vite Plugin
- feat: 支持input的自动填充
- feat: 管理员修改用户头像
- fix: 头像上传点击图片和按钮外的区域会触发文件选择
- refactor: 修改API函数为Hooks
- refactor: 二维码组件使用Naive UI自带组件
开发注意事项
请按序执行以下命令,并在确保所有所有警告与错误都已处理完毕再提交代码。
pnpm type-check && pnpm lint && pnpm format
活跃数据
鸣谢
- 图标:https://remixicon.com/icon/cloud-fill
- Vue.js 官方文档
- Vue Router 官方文档
- Naive UI 官方文档
- Vite 官方文档
- typescript-eslint 官方文档
- 适用于 Pinia 的持久化存储插件
- JS 性能利器!Web Worker
- Normalize.css
- vue3+vite 使用monaco-editor 编辑器
- 博客园:TypeScript(接口—泛型)
- GitHub: qrcode.vue
- GitHub: BililiveRecorder-WebUI
- GitHub: cloud-music(首屏加载动画)
- Stack Overflow: How to open PDF Blob using browser's PDF viewer rather than downloading?
- 掘金:[前端项目创新]前端检测版本更新的简易之道
- 掘金:控制台报错 -- 被动事件监听器 !!!
- 掘金:vue3实现全屏拖拽上传文件
- 知乎: Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用
- 知乎: Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)
- 哔哩哔哩: console.log导致的内存泄露
- 哔哩哔哩: 在vite中手动分包【渡一教育】
- 哔哩哔哩: 阿里云的文件上传【渡一教育】
- 哔哩哔哩: 拖拽API【渡一教育】
- 哔哩哔哩: 监控页面卡顿【渡一教育】
- 哔哩哔哩: web share技术
- CSDN: Pinia使用方法及持久化存储
- CSDN: 去掉router-link文字的下划线
- CSDN: vue3+vite如何引入本地静态图片
- CSDN: 什么是弹性(display: flex)布局 ?
- CSDN:vue3.2props设置默认值【defineProps】
- CSDN: vue怎么获取package.json中的版本号
- CSDN: 路由跳转push和replace的区别
- CSDN: axios请求文件流以及显示
- CSDN: vue 默认margin:8px
- CSDN: 前端判断当前系统主题
- CSDN: ESLint语法检查--indent(缩进)规则
- CSDN: 拖拽本地文件夹到浏览器中,展示所有文件结构
- 简书: v-html防止XSS注入