这是我参与「第四届青训营 」笔记创作活动的第5天
「项目简介」
团队为4人组成的前后端分离团队，项目内容为 还原 win11 桌面 部分功能（登录、新建文件夹、音视频播放、文件夹目录结构展示、终端基本交互命令），旨在锻炼对 css、js、vue 的基本 api 熟练使用，同时也加深音频、视频、文件等内容在前后端存储和渲染方式的理解、此外也锻炼了计算机基础知识的实践（数据结构、计算机网路）
「技术栈」
| 技术 | 说明 | 版本 | 备注 |
|---|---|---|---|
| pnpm | 包管理器 | 7.6.0 | www.pnpm.cn |
| Vite | 前端自动构建工具 | 3.0.0 | www.vitejs.net |
| Vue3 | 前端框架 | 3.2.37 | v3.vuejs.org |
| Vue-Router | 路由框架 | 4.1.3 | router.vuejs.org |
| Pinia | 全局状态管理框架 | 2.0.17 | pinia.vuejs.org |
| Axios | http 中间件 | 0.27.2 | github.com/axios/axios |
| vueuse | Vue官方工具函数包 | 9.0.0 | vueuse.org |
| eslint | 统一代码风格工具 | 8.0.1 | eslint.cn |
| sass | css 预处理器 | 1.54.0 | www.sass.hk |
| github | 代码托管平台 | github.com/lct01lct/Wi… |
「目录结构」
Win11-in-Vue
public--静态文件资源
src--项目根目录
assets--静态资源
component--组件
router--路由
services--请求层
store--全局数据管理
utils--工具函数库
views--视图组件
App.vue--入口组件
main.js--入口文件.env--环境变量
.eslintrc.cjs--eslint 配置文件
.gitignore--git 忽略配置
.prettierrc.json--prettier 配置文件
index.html--html 模板
package.json--包管理信息
pnpm-lock-yaml--pnpm 相关信息
README.md--项目文档
vite.config.js--vite 配置文件
「部分技术选型原因」
pnpm：performance npm（高性能npm），新一代的包管理工具，比较npm和yarn性能上有很大提升，不仅快速，而且还节省磁盘空间vite：被称为下一代的前端工具链，构建依赖比一众自动化构建工具块很多、在开发环境中不进行打包，省略打包步骤pinia：轻量便捷的全局状态管理框架、简化状态管理库、不需要模块嵌套
「特别鸣谢」
感谢开源软件的支持和参考项目提供的源码支持
