企业网站建设实训心得六安人

第一阶段：基础入门

1. 了解 Vue 3 概述

• 阅读官方文档简介
  想象 Vue 3 是一款超酷的游戏，而官方文档就是这个游戏的说明书。当你打开文档简介，就像翻开说明书的开头部分，这里会告诉你这个游戏和之前版本相比有啥新玩法、新特点。比如 Vue 3 用了更厉害的技术让游戏运行得更快，就像给赛车换了个超棒的发动机；还增加了一种新的组队方式（Composition API），让玩家能更灵活地组合技能，在游戏里发挥出更强的战斗力。通过看文档简介，你能对这个游戏有个大概的印象，知道它哪里好玩、哪里有挑战。
• 观看入门视频
  网上的入门视频就像是游戏高手录制的教学视频。高手会在视频里快速地展示怎么开始玩这个游戏，比如怎么创建一个简单的游戏角色（搭建简单的页面），怎么让角色动起来（显示动态数据）。你跟着视频看，就像在旁边看着高手操作，一下子就能感受到这个游戏的魅力和乐趣，对 Vue 3 有了更直观的认识，心里想着“哇，原来还能这么玩”。

2. 搭建开发环境

• 安装 Node.js 和 npm
  Node.js 就像是一个神奇的工具箱，里面装着各种能让你的电脑变成“开发小能手”的工具。npm 呢，就像是这个工具箱的快递员，它能帮你从网上把你需要的其他工具（代码库）快速送到你的电脑里。你去 Node.js 的官方网站，就像去神奇工具箱的专卖店，挑一个适合你电脑系统的箱子带回家（下载安装）。安装好后，你在电脑的命令行里输入 node -v 和 npm -v，就像是问工具箱和快递员他们的身份信息，如果能显示出版本号，那就说明他们已经准备好为你服务啦。
• 使用 Vite 创建 Vue 3 项目
  Vite 就像是一个天才的建筑师，它能快速帮你画出一个 Vue 3 项目的设计蓝图。你在命令行里输入 npm create vite@latest my-vue-app -- --template vue，这里的 my-vue-app 就是你要建的“大楼”的名字，你可以随便改。建筑师 Vite 很快就会把蓝图画好，然后你进入这个“建筑工地”（项目文件夹），输入 npm install，这就像是让快递员 npm 把建楼需要的各种材料（项目依赖）都送到工地。材料都到齐后，输入 npm run dev，就像是吹响开工的号角，启动开发服务器。这时候你打开浏览器，输入命令行里提示的地址，就能看到一个欢迎页面，说明你的“大楼”已经打下了基础，有了初步的样子。
• 熟悉项目基本结构
  打开项目文件夹，就像走进一个刚刚建好框架的大楼。src 目录是这个大楼的核心区域，里面的 App.vue 就像是大楼的大厅，所有的人（功能和展示）都从这里开始进出。main.js 是大楼的总控制室，负责调配各种资源和启动整个大楼的运行。public 目录就像是大楼的仓库，里面放着一些不需要加工就能直接用的东西，比如装饰品（图片、图标）等。

3. 学习基础语法

• 模板语法
  • 插值表达式 {{ }}
    插值表达式就像是一个会说话的魔法框。你在代码里写了一个句子或者一个数字，把它放在 {{ }} 这个魔法框里，它就能把这个内容显示在网页上。就好像你在魔法框里写了“欢迎来到我的网页”，网页上就会出现这句话。而且如果你改变代码里的内容，魔法框显示的内容也会跟着变，就像魔法框会实时更新消息一样。
  • 常用指令
    • v-bind（缩写为 :）：它就像是一个万能的绳子，能把代码里的变量和 HTML 标签的属性绑在一起。比如你有一张图片的地址存在一个变量里，用 v-bind 把这个变量和 <img> 标签的 src 属性绑起来，图片就能在网页上显示出来了。就像用绳子把风筝和你手里的线连起来，风筝就能飞起来啦。
    • v-on（缩写为 @）：这个指令就像是一个超级灵敏的小耳朵，能听到用户在网页上的各种动作，比如点击按钮。你给按钮绑定一个点击事件，当用户点击按钮时，小耳朵就会听到，然后执行你写好的代码。就像小耳朵听到门铃响，就去开门一样。
    • v-if：它就像是一个聪明的门卫，会根据你设定的规则决定是否让某个东西进入网页显示。如果规则满足了，门卫就会放行，东西就会出现在网页上；如果规则不满足，门卫就会拦住，东西就不会显示。比如你设定只有用户登录了才能看到某个按钮，门卫就会检查用户是否登录，然后决定让不让按钮显示出来。
    • v-for：它就像是一个勤劳的小工人，能把一个列表里的每个东西都拿出来，在网页上创建对应的显示内容。比如你有一个水果列表，里面有苹果、香蕉、橘子，用 v-for 就能把每个水果的名字都显示在网页上。就像小工人一个一个地把水果从仓库里拿出来摆在货架上。
• 响应式原理
  • ref
ref 就像是一个会变魔术的小盒子。你把一个东西（比如一个数字或者一个字符串）放进这个盒子里，当这个东西发生变化时，和这个东西相关的网页内容也会跟着变。不过要注意，从盒子里拿东西或者放东西的时候，要加上 .value，就像打开盒子需要用钥匙一样。
  • reactive
reactive 就像是一个超级魔法口袋。你把一个对象（比如包含很多信息的一个小包裹）放进这个口袋里，当对象里的信息发生变化时，网页上显示的对应内容也会自动更新。和 ref 不同的是，从魔法口袋里取东西不需要钥匙，可以直接拿。

在第一章，你就像一个刚刚接触新游戏的玩家，要多动手试试各种玩法（编写代码），通过不断地尝试和犯错，你就能慢慢掌握这些基础技能，为后面更深入的学习打下坚实的基础。