金融产品做网站推广温州网页网站制作
总目标: 在 Day 21-23 完成 Vue.js 的介绍学习、环境搭建，并成功运行第一个 Vue 3 项目，理解其基本结构。
Day 21: Vue.js 介绍与概念理解 (~3 小时)
-
本日目标: 理解 Vue.js 是什么、渐进式框架的概念以及选择 Vue 的原因。初步了解 Vite 是什么及其作用。
-
所需资源:
- Vue 3 官方文档 (介绍): https://cn.vuejs.org/guide/introduction.html
- Vite 官方文档 (介绍): https://cn.vitejs.dev/guide/
-
学习计划:
-
番茄时钟 1 (25 分钟工作 + 5 分钟休息):
- 内容: Vue.js 是什么？
- 活动: 阅读 Vue 3 官方文档中“介绍”部分，重点理解 Vue 的定义、核心特性以及它解决的问题。
- 思考: Vue 与传统前端开发方式有何不同？
- 休息: 短暂休息，放松眼睛。
-
番茄时钟 2 (25 分钟工作 + 5 分钟休息):
- 内容: 渐进式框架概念。
- 活动: 继续阅读 Vue 3 官方文档“介绍”部分，深入理解“渐进式框架”的含义。它如何体现在 Vue 的使用中？为何这种特性很重要？
- 思考: 渐进式框架允许你如何使用 Vue？从简单到复杂？
- 休息: 短暂休息。
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容: 为什么选择 Vue？
- 活动: 阅读 Vue 3 官方文档“介绍”部分，总结 Vue 的主要优势（易用、性能、灵活等）。与其他主流框架（如 React, Angular）进行简单的对比（无需深入）。
- 思考: 在哪些场景下，Vue 可能是一个更好的选择？
- 休息: 短暂休息。
-
番茄时钟 4 (25 分钟工作 + 5 分钟休息):
- 内容: Vite 介绍及其在 Vue 中的作用。
- 活动: 阅读 Vite 官方文档的介绍部分，了解 Vite 是什么，为什么它比传统的打包工具（如 Webpack）快，以及它如何用于 Vue 项目。
- 思考: 为什么 Vue 官方推荐使用 Vite 创建项目？
- 休息: 短暂休息。
-
总结与回顾 (10-15 分钟):
- 快速回顾今天学习的核心概念：Vue 的定义、渐进性、优势以及 Vite 的作用。
- 整理笔记或思维导图。
-
Day 22: 使用 Vite 创建 Vue 3 项目 (~3 小时)
-
本日目标: 成功使用 Vite 创建一个新的 Vue 3 项目，了解创建过程中的关键步骤和选项。
-
所需资源:
- Vue 3 官方文档 (快速上手): https://cn.vuejs.org/guide/quick-start.html (重点关注“创建应用”部分)
- Vite 官方文档 (快速开始): https://cn.vitejs.dev/guide/ (重点关注“第一个 Vite 项目”部分)
-
学习计划:
-
番茄时钟 1 (25 分钟工作 + 5 分钟休息):
- 内容: 准备环境：Node.js。
- 活动: 确认你的计算机上已安装 Node.js (版本 >= 16.0)。如果未安装，根据 Node.js 官网指引进行安装。了解 npm 或 yarn 或 pnpm 包管理器的基本命令（
install,run）。 - 操作: 打开终端，输入
node -v和npm -v(或yarn -v,pnpm -v) 检查版本。 - 休息: 短暂休息。
-
番茄时钟 2 (25 分钟工作 + 5 分钟休息):
- 内容: 使用 Vite 创建 Vue 项目 (命令执行)。
- 活动: 参照 Vue 3 官方文档“快速上手”中的指令，在终端执行创建 Vue 应用的命令 (
npm create vue@latest或yarn create vue@latest或pnpm create vue@latest)。按照提示选择 Vue 3 和其他选项（例如，暂时不选择 TypeScript, JSX, Router, Pinia, Vitest, Cypress）。 - 操作: 执行创建命令，完成项目目录生成。
- 休息: 短暂休息。
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容: 安装项目依赖。
- 活动: 进入新创建的项目目录。根据官方文档指引，执行安装依赖的命令 (
npm install或yarn或pnpm install)。理解这一步的作用是下载项目所需的库和工具。 - 操作: 在项目目录中执行依赖安装命令。
- 休息: 短暂休息。
-
番茄时钟 4 (25 分钟工作 + 5 分钟休息):
- 内容: 运行第一个 Vue 应用。
- 活动: 参照官方文档，执行启动开发服务器的命令 (
npm run dev或yarn dev或pnpm dev)。观察终端输出的本地开发地址。 - 操作: 执行运行命令，在浏览器中打开提供的地址，看到默认的 Vue 欢迎页面。
- 思考: 为什么执行这个命令就能看到网页？
- 休息: 短暂休息。
-
总结与回顾 (10-15 分钟):
- 回顾项目创建和运行的整个流程。
- 确保项目能够正常启动并在浏览器中访问。
- 记录遇到的问题及解决方法。
-
Day 23: 项目结构与第一个 Vue 应用初探 (~3 小时)
-
本日目标: 了解由 Vite 创建的 Vue 3 项目的基本目录结构，理解
createApp的作用，并初步认识 Vue 单文件组件 (.vue文件)。 -
所需资源:
- Vue 3 官方文档 (快速上手): https://cn.vuejs.org/guide/quick-start.html (重点关注“项目结构”和“应用实例”部分)
-
学习计划:
-
番茄时钟 1 (25 分钟工作 + 5 分钟休息):
- 内容: 项目结构介绍 - 根目录。
- 活动: 打开项目目录，使用 VS Code 或其他代码编辑器查看文件结构。重点关注
package.json(了解项目信息和脚本命令) 和index.html(这是应用的入口 HTML 文件)。 - 探索:
index.html中是如何引入 Vue 应用的？ - 休息: 短暂休息。
-
番茄时钟 2 (25 分钟工作 + 5 分钟休息):
- 内容: 项目结构介绍 -
src目录。 - 活动: 探索
src目录。理解它是存放源代码的地方。查看main.js(或main.ts如果选择了 TypeScript) 和App.vue文件。了解components目录的作用 (存放可复用组件)。 - 探索:
main.js是整个应用的入口文件吗？ - 休息: 短暂休息。
- 内容: 项目结构介绍 -
-
番茄时钟 3 (25 分钟工作 + 5 分钟休息):
- 内容: 第一个 Vue 应用 (
createApp)。 - 活动: 深入查看
src/main.js文件。理解createApp方法的作用：创建一个 Vue 应用实例。理解.mount('#app')的作用：将 Vue 应用挂载到index.html中 ID 为app的 DOM 元素上。 - 阅读: 参照 Vue 官方文档中关于“应用实例”的部分。
- 休息: 短暂休息。
- 内容: 第一个 Vue 应用 (
-
番茄时钟 4 (25 分钟工作 + 5 分钟休息):
- 内容: 初步认识
App.vue。 - 活动: 查看
src/App.vue文件。认识.vue文件是一种单文件组件 (Single File Component, SFC)。了解它通常包含<template>,<script>, 和<style>三个主要块。初步理解<template>中是 HTML 结构，<script>中是 JavaScript 逻辑。 - 动手: 尝试修改
<template>块中的一些文本内容，保存文件，观察浏览器中的变化（Vite 的热模块更新）。 - 休息: 短暂休息。
- 内容: 初步认识
-
总结与回顾 (10-15 分钟):
- 回顾项目结构的关键部分 (
index.html,main.js,App.vue)。 - 总结
createApp和.mount的作用。 - 确保理解
.vue文件的大致结构。 - 再次运行项目，尝试进行简单的修改并观察结果。
- 回顾项目结构的关键部分 (
-
掌握检查:
- 在 Day 23 结束时，你应该能够：
- 独立使用
npm create vue@latest命令成功创建一个 Vue 3 项目。 - 进入项目目录并使用
npm install安装依赖。 - 使用
npm run dev启动开发服务器并看到 Vue 默认页面。 - 大概知道
index.html,src/main.js,src/App.vue这几个文件的作用。 - 理解
createApp().mount('#app')这行代码的意义。
- 独立使用