vue3学习从大事件系统开始

概述

我已经看完了黑马程序员的前端课程(从html至vue3),以及小滴课堂的前端课程(html)。但是还是不能说可以做一个管理系统或者直接上手修改。对前端知识已经有一定的大概了解了，所以需要从一个系统来重新复习一下知识。

框架

框架名称	作用	版本
pnpm	Npm -> pnpm 节省磁盘空间 提高安装速度
Vue3	流行啊，就学
Vue router	配套vue的前端路由
Pinia	状态管理
element plus	Vue3 的 ui框架
Eslint	代码质量检测
Prettier	代码格式化
Husky	git hook 工具，配合lint-staged使用
lint-staged	Lint工具，提交前检查格式，配合eslint prettier
axios	请求工具
vue-quill	vue的富文本编辑器
sass	升级版css

调整目录及认识目录

目录	描述
package.json	项目描述信息，依赖信息，脚本，相当于pom.xml
node_modules	依赖项，相当于lib(存储jar)
public	存放浏览器直接访问的内容，比如favicon.png （网站图标）
src	源码
index.html	首页，有个id=app的div 和 引入了main.js

src目录下：

目录	描述
api	存放请求服务器的js，比如user.js就是访问user相关的请求
assets	存储图片
components	一些公共组件，页面中重复使用的组件，比如两个页面都有同一个搜索框及搜索按钮
router	路由
stores	状态存储
utils	公共js
views	页面
app.vue	相当于首页
main.js/ts	相当于启动js , 相当于java中启动类

业务

注册功能

登录功能：保存token至状态管理中，以后调用接口在请求头中添加header用于后端权限验证

获取用户信息

修改用户信息

修改用户头像：文件上传

修改密码

文章分类管理：添加、修改、删除、列表、ID查询

文章分类主要练习弹窗中做添加、修改；列表的头部搜索及分页。

文章管理：添加、修改、删除、列表、ID查询

文章管理主要练习内容较多不在弹窗中做，加上练习文件上传和表单一起传给后端服务。