Vue3项目探索

安装

依赖环境

注意node版本要对，不对用nvm换

• Node.js v20.9.0+
• 包管理器，如: pnpmyarnnpm

在Vue3项目中集成Element Plus的流程可分为以下步骤，结合多个官方文档和社区实践总结：

一、环境准备

1. 创建Vue3项目
   使用Vite或Vue CLI创建项目（推荐Vite）：

   npm create vite@latest my-app --template vue
   cd my-app
   

2. 安装依赖
   确保Node.js版本≥14，执行：

   npm install element-plus --save
   # 若需要图标库
   npm install @element-plus/icons-vue
   

组件传值

我上次所撰写的页面属于一个分步骤走的流程页面，因此每个步骤页面都有共同的父组件index.vue，因此各个步骤页面的 数据都是统一通过父组件进行请求和分发的，因此只有父子组件之间的数据流动。这里我是使用的 defineProps和 defineEmits来实现组件双向绑定（v-model）的标准且兼容性广泛的方法。其核心在于理解 v-model 本质上是语法糖，它自动处理了一个名为 modelValue的 prop 和一个名为 update:modelValue的自定义事件 。

📦 1. 环境准备

安装 Node.js 和 npm

• 从 Node.js 官网 下载安装包（建议 LTS 版本）

• 安装后验证是否成功：

  node -v   # 检查 Node.js 版本
  npm -v    # 检查 npm 版本
  

此次教学课程为硅谷甄选运营平台项目,包含运营平台项目模板从0到1开发，以及数据大屏幕、权限等业务。

此次教学课程涉及到技术栈包含 :vue3+TypeScript+vue-router+pinia+element-plus+axios+echarts 等技术栈。

一、vue3组件通信方式

通信仓库地址:https://gitee.com/jch1011/vue3_communication.git

不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。

只需要一个html文件

项目较为简单，主要是基本的值的调度方式等联系。 以下是完整的HTML和JavaScript代码，用于创建一个基本的To do list前端页面，实现添加任务、切换任务状态和删除任务的功能，并且利用Vue动态绑定类名来改变已完成任务的样式。

完整的HTML和JavaScript代码

 功能总结为：

 1. 从CDN引入Vue.js库，以便在网页中使用Vue.js的功能。
 2. 引入本地的`app.js`文件，该文件包含了使用Vue.js实现To do list应用的具体代码。

Day 1

好的，我们来模拟一次前端的深度技术面试。我将以面试官（I）和候选人（C）的角色进行一问一答

第一幕：JavaScript 中的事件循环机制

I： 请解释一下 JavaScript 中的事件循环机制。如果现在有一段包含 setTimeout、Promise 和 async/await 的代码，你能描述一下它们的执行顺序吗？

实习产生的经验总结

本周主要是根据学长的安排进入了流量开发小组，主要是对接天翼云后端api进行监听器部分的功能点开发以及创建后端服务器组的功能点实现。

创建监听器

首先是创建监听器的页面，它包含五个步骤，每个步骤都分了单独的页面。由此我将文件分为主文件index.vue和五个步骤的页面文件。主文件便负责了各种页面的数据的请求以及最后创建监听器的请求。

同时此功能点每个步骤间有各类数据的关联，其难点便在于对各组件之间传值的方式的书写。这里我使用的是defineProps结合 defineEmits的方式实现各个组件之间的数据同步的。因为本身Vue 3支持多个v-model绑定，因此可实现更简洁的双向数据流：

本周按照计划的那样，进行了基本的git学习以及一些Echart的实操。同时修复了一些项目的代码具体的修复想法都写在了之前的文件里了，这里不再赘述。同时也尝试了熟悉了VueX的代码。

项目代码学习

对于项目代码的阅览，我主要包括动态路由，VueX中的commit，以及&&运算符的巧用的学习

Dynamic Router

动态路由是一种根据用户权限动态控制前端页面访问权限的技术方案。其核心原理是将后端返回的用户菜单权限数据与前端预定义的路由配置进行映射和匹配。

具体的实现流程是：用户登录成功后，前端根据其权限标识（如角色或权限列表）从后端接口获取对应的菜单数据。随后，前端通过一个转换函数（如 filterAsyncRoutes）将这些菜单数据加工成符合 Vue Router 规范的路由配置对象。这个过程通常涉及组件的动态解析（例如使用 () => import(...)实现懒加载）和路由层级的递归处理。生成的有效路由配置会通过 router.addRoute（Vue Router 4）或 router.addRoutes（Vue Router 3）方法动态注入到路由实例中。同时，侧边栏导航菜单会根据处理后的权限数据，利用递归组件或 v-for指令动态渲染，确保用户界面与其权限实时同步。

@error处理异常，调用函数

在 Vue 3 中，@error 是用于监听 DOM 元素或组件上的错误事件的一种方式。当绑定的元素或组件发生错误时，可以触发一个回调函数来处理异常。以下是关于 @error 处理异常和调用函数的详细解释和示例。

1. 使用 @error 监听 DOM 元素的错误事件

@error 可以直接绑定到 HTML 元素（如 <img>、<video> 等）上，用于捕获加载失败或其他错误事件。

这是对于计算机设计大赛的项目进行的简略撰写以及技巧记录

前提准备

数据库格式

数据库user-list中的存储方式类似于：

{
  "username": "aaa",
  "password": "123",
  "love": [],
  "commit": []
}