agentwoo/my-vue3-app

学习开发

开发环境的搭建

• VS Code + Volar

熟悉各类配置文件

• .vscode
• .editorconfig
• .gitignore
• tsconfig.json
• vite.config.ts:未完成

vue3的学习记录

• template中属性及双花括号插值的应用
• ref、reactive、computed响应式的应用
• defineProps声明组件属性的应用

day01

• 使用computed完成购物车案例
• watch、watchEffect监听器的应用
• defineEmits的应用

day02

• 全局组件、局部组件、递归组件的应用
• 动态组件的应用
• scoped及scss的应用
• ref搭配defineExpose的应用ref获取dom元素

day03

• kepp-alive缓存组件的应用
• 依赖注入provide-injectprovide和inject
• style中v-bind绑定样式

day04

• 路由的搭建 pnpm安装路由
• 编程式路由导航 编程式路由
• 路由历史模式push、replace、go、back
• 路由传参query

day05

• 嵌套路由 嵌套路由注意点
• teleport-瞬移组件
• toRef,toRefs,toRaw,markRaw vue3之toRef、toRefs、toRaw

day06

• slot-默认插槽、具名插槽、作用域插槽及动态插槽的使用 vue3中插槽的使用
• suspense

day07

• transition、transition生命周期、transitionGroup Vue3过渡 Animate样式库
• Mitt 事件总线
• 组件使用v-model

day08

• pinia的安装及store的初始化
• state、action、getters的使用
• $patch、$reset、$subscribe、$onAction的使用

day09

• 初识elementPlus
• deep() :slotted() :global() deep() :slotted() :global()

Demo

• 登录页面编写
• 构建首页解构
• 菜单列表--表格数据渲染、列表分页、列表筛选、删除用户
• 用户列表--表格数据渲染、编辑用户信息
• 角色列表--角色列表编写、权限页面编写、删除角色

相关资源

• Vue3 + vite + Ts + pinia + 实战 + 源码 +electron
• 推荐 12 个值得学习的 TypeScript 宝库！
• vue3-learning
• typescript-learn
• Pinia 中文文档
• Element Plus