首页 > 其他分享 >重生之我在学Vue-- Vue3 学习路径总览

重生之我在学Vue-- Vue3 学习路径总览

时间：2024-12-09 20:56:51浏览次数：5  
标签：Vue 项目 -- 学习 任务 组件 总览 Day

重生之我在学Vue-- Vue3 学习路径总览

文章目录

前言

一个完整的项目应该包含前端和后端，一名合格的程序媛也不应该掌握前端或者后端，更应该两者兼修，方能行稳致远。以下为20天Vue3学习计划，从基础到进阶比较全面的学习计划：

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

GO语言后端成神之路：Go后端学习之路_野生的程序媛的博客-CSDN博客

Day 1-10：基础阶段

Day 1：Vue 3 基础与开发环境搭建

  • 学习目标：了解 Vue 3 的基本概念，搭建开发环境。
  • 学习内容：
    • Vue 3 的特点和核心概念。
    • 使用 Vite 创建 Vue 3 项目。
    • 理解项目结构：src 文件夹、main.js、App.vue。
    • 编写第一个简单的 Vue 组件（如计数器）。
  • 任务：

Day 2：Composition API 与响应式系统

  • 学习目标：掌握 Composition API 和响应式系统的使用。
  • 学习内容：
    • ref 和 reactive 的用法。
    • computed 和 watch 的使用场景。
    • 生命周期钩子（如 onMounted、onUnmounted）。
  • 任务：

Day 3：模板语法与指令

  • 学习目标：掌握 Vue 3 中的模板语法和常用指令。
  • 学习内容：
    • 数据绑定（双向绑定、单向绑定）。
    • 常用指令：v-bind、v-model、v-if、v-for、v-show、v-on。
    • 事件处理与表单绑定。
  • 任务：

Day 4：组件化开发

  • 学习目标：掌握组件化开发，理解组件通信。
  • 学习内容：
    • 父子组件通信：props 和 emit。
    • 插槽（slot）的使用。
    • 动态组件与异步组件。
  • 任务：
    • 创建父子组件，实现任务列表的增删功能。
    • 使用插槽实现一个可复用的卡片组件。

Day 5：路由管理（Vue Router）

  • 学习目标：掌握 Vue Router 的基础用法。
  • 学习内容：
    • 路由配置与导航。
    • 动态路由与嵌套路由。
    • 路由守卫与懒加载。
  • 任务：
    • 为项目添加路由支持，实现页面切换（如任务列表页和任务详情页）。
    • 阅读 Vue Router 官方文档.

Day 6：状态管理（Pinia）

  • 学习目标：掌握 Pinia 的基础用法，管理全局状态。
  • 学习内容：
    • 状态、Getter 和 Action 的概念。
    • Pinia 的模块化管理。
  • 任务：
    • 创建一个任务管理的状态模块，支持全局任务列表的增删改查。
    • 阅读 Pinia 官方文档.

Day 7：数据请求（Axios）

  • 学习目标：使用 Axios 发送 HTTP 请求，处理后端数据。
  • 学习内容：
    • Axios 的基本用法：GET、POST、PUT、DELETE。
    • 拦截器的使用。
  • 任务：

Day 8：UI 框架（Element Plus 或 Naive UI）

  • 学习目标：学习 UI 框架的基本使用，提升页面样式和交互效果。
  • 学习内容：
    • 常用组件：按钮、表单、弹窗、表格。
    • 全局引入和按需引入的配置方法。
  • 任务：
    • 使用 UI 框架美化任务管理系统的页面。
    • 阅读所选 UI 框架的官方文档。

Day 9：项目整合

  • 学习目标：整合前几天的学习成果，完成一个基础版本的任务管理系统。
  • 学习内容：
    • 整合路由、状态管理和数据请求。
    • 实现任务的完整增删改查功能。
  • 任务：
    • 完成“任务管理系统”的 MVP（最小可行产品）。

Day 10：复习与总结

  • 学习目标：复习前 9 天的内容，总结学习成果。
  • 学习内容：
    • 巩固基础知识，解决项目中的问题。
    • 总结 Vue 3 开发的核心流程。
  • 任务：
    • 完善项目的功能与样式。
    • 将项目部署到 Vercel 或 Netlify。

Day 11-20：进阶阶段

Day 11：Vue 3 高级特性

  • 学习目标：掌握 Vue 3 的高级特性。
  • 学习内容：
    • Teleport 的使用场景。
    • Suspense 实现异步组件加载。
    • 自定义指令。
  • 任务：
    • 为项目添加全局模态框（使用 Teleport）。
    • 使用 Suspense 优化异步加载的任务详情页。

Day 12：性能优化

  • 学习目标：学习 Vue 3 的性能优化技巧。
  • 学习内容：
    • 按需加载（路由懒加载、组件按需加载）。
    • 动态导入和 Tree-shaking。
    • 虚拟滚动（适用于大数据列表）。
  • 任务：
    • 优化项目的加载性能，减少初始加载体积。

Day 13：TypeScript 与 Vue 3

  • 学习目标：学习如何在 Vue 3 中使用 TypeScript。
  • 学习内容：
    • 在 Vue 项目中配置 TypeScript。
    • 使用类型声明（如 Props 和 Emit）。
  • 任务：
    • 将项目迁移到 TypeScript，添加类型检查。

Day 14：测试（Jest + Vue Test Utils）

  • 学习目标：学习如何为 Vue 组件编写单元测试。
  • 学习内容：
    • 使用 Jest 和 Vue Test Utils 测试 Vue 组件。
    • 测试组件的渲染、事件和状态。
  • 任务：
    • 为任务管理系统的核心组件编写单元测试。

Day 15：国际化（i18n）

  • 学习目标：学习如何为 Vue 项目添加国际化支持。
  • 学习内容：
    • 配置 Vue I18n 插件。
    • 实现多语言切换。
  • 任务：
    • 为项目添加中英文切换功能。

Day 16：动画与过渡

  • 学习目标：学习动画和过渡效果，优化用户体验。
  • 学习内容：
    • Vue 内置的 <transition> 和 <transition-group>。
    • 使用动画库（如 Anime.js 或 GSAP）。
  • 任务：
    • 为任务列表的增删操作添加动画效果。

Day 17：插件开发

  • 学习目标：学习如何开发 Vue 插件。
  • 学习内容：
    • Vue 插件的基本结构。
    • 在项目中使用自定义插件。
  • 任务：
    • 开发一个简单的全局通知插件。

Day 18：项目优化与部署

  • 学习目标：优化项目并部署到生产环境。
  • 学习内容：
    • 使用 Vite 打包生产代码。
    • 部署到 Vercel 或 Netlify。
  • 任务：
    • 部署最终版本的任务管理系统。

Day 19：项目功能扩展

  • 学习目标：在现有项目基础上，增加更复杂的功能，进一步提升项目的实用性和技术深度。
  • 学习内容：
    1. 权限管理：
      • 为项目添加用户角色（管理员、普通用户）。
      • 根据用户角色动态调整页面功能（如管理员可以删除任务，普通用户只能查看和添加任务）。
    2. 分页与搜索：
      • 为任务列表添加分页功能（前端分页或后端分页）。
      • 实现任务的搜索功能（通过关键词过滤任务列表）。
    3. 文件上传：
      • 添加文件上传功能（如任务附件上传）。
      • 使用第三方文件存储服务（如 AWS S3、阿里云 OSS）或模拟后端接口。
  • 实践任务：
    • 添加用户角色管理功能，支持管理员和普通用户的权限区分。
    • 为任务列表实现分页和关键词搜索功能。

Day 20：团队协作与代码规范

  • 学习目标：学习团队协作开发中的最佳实践，掌握代码规范和工具使用。
  • 学习内容：
    1. 代码规范：
      • 学习 Vue 项目的代码规范（如 ESLint + Prettier）。
      • 配置 ESLint 和 Prettier，统一代码风格。
    2. Git 工作流：
      • 学习 Git 分支管理（如 Git Flow、Feature Branch）。
      • 使用 Pull Request 和 Code Review 进行协作开发。
    3. 接口文档与 Mock 数据：
      • 使用 Swagger 或 Postman 编写接口文档。
      • 使用 Mock 数据工具（如 Mock.js）模拟后端数据。
  • 实践任务：
    • 配置 ESLint 和 Prettier，修复项目中的代码风格问题。
    • 使用 Git 创建一个新分支，完成一个功能后提交 PR（模拟团队协作）。
    • 使用 Mock.js 模拟后端接口，扩展任务管理系统的功能。

标签：Vue,项目,--,学习,任务,组件,总览,Day
From： https://blog.csdn.net/Xiao651/article/details/144357694

相关文章

  • 什么是反向代理？作用、原理和实例详解
    ......
  • 次小生成树学习笔记
    严格次小生成树前置芝士最小生成树|倍增LCA定义如果最小生成树选择的边集是\(E_M\)，严格次小生成>树选择的边集是\(E_S\)，那么需要满足：(\(value(e)\)表示边\(e\)的权值)\(\sum_{e\inE_M}value(e)<\sum_{e\inE_S}value(e)\)。也就是说，严格次小生成树的边权和一定是......
  • 记一次现场CEMS配套的北京万维盈创数采仪与中控S7 1500通讯故障处理
    现场除尘设备配置了CEMS，通过北京万维盈创的数采仪使用modbusTCP和中控室1500PLC通讯，岗位人员反映中控计算机上数据异常，表现为数据不变化，有时候跳变到无穷大。经过几天排查处理，基本上解决了，把出现问题的地方列举一下：1.数采仪的IP地址和其中一台工控机的IP地址一致，通过修改工控机I......
  • windows隐藏账户、影子账户
    隐藏账户（HiddenAccount）和影子账户（ShadowAccount）并不是同一个概念，它们在计算机安全和系统管理中有不同的含义：隐藏账户（HiddenAccount）：在操作系统或网络服务中，隐藏账户是指那些不在标准用户列表中显示的账户。这种账户通常被管理员用来进行远程访问或执行特定的管理任务，而不被......
  • JS-6 数据类型
    数据类型：数值、字符串、布尔值、undefined、null、对象1、数据类型分类JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。（ES6又新增了第七种Symbol类型的值和第八种BIglnt类型）2、数据类型分类原始分类（基础类型）：数值、字符串、布尔值。......
  • 声明&参考资料
    声明该合集是一个非常简单的、使用Django框架进行web开发的Python课程小作业记录，并非原创教程。它会以完成为目标，不求甚解的实现[V1][V1]项目完全参照链接2的教程笔者本人水平有限，如有错漏，恳请指正主要参考资料【全球最强python教程--mosh大神的python从入门到精通-完整......
  • 整体二分
    简介整体二分是一种离线算法，适用于符合以下特征的DS题。询问具有可二分性。修改之间互不影响。修改无关答案判定标准。（注意是判定标准而不是判定过程）贡献满足交换律，结合律，可加性。（即答案与操作先后顺序无关，且可加）允许离线。（废话这是离线算法不允许离线还玩毛线啊）总体来......
  • 实验与统计学
    从实验的过程上来看，好像不涉及统计的相关的内容，但统计学对实验的效果非常重要，决定了是否可以信任最终的实验结果，以及是否可以做出正确的决策AB实验中涉及到统计知识如下图，主要围绕图中来介绍这些概念和AB实验的关系1.抽样分布1.1抽样如果我们想知道所有用户的平均APP停留时......
  • 算法学习 - Huffman树
    题目：输入N个权值（1-100正整数），建立哈夫曼树Note:一次遍历找出序列中最小数和次小数：如果序列只有一个数，返回这个数遍历这个序列，对每个数：如果这个数比最小数小，更新原来的次小数为最小数，更新原来的最小数为这个数；如果这个数不比最小数小，但比次小数小，更新原来的次小数为这个数。......
  • ZZJC新生训练赛第二十一场
    链接：https://ac.nowcoder.com/acm/contest/98790密码：zzjcacm难度分类（同一难度下按字典序上升）简单:A,D,F中等:C,E困难:H,B,GA-解题思路帅数都是质数的2，3，4次的和，因此预处理出质数之后暴力跑三层循环即可，由于至少是2次的和，所以预处理到根号范围即可，注意要进行一些剪......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99