【金秋打卡】第6天 全新升级，基于Vue3最新标准，打造后台综合解决方案之项目介绍模块开发

课程名称：全新升级，基于Vue3最新标准，打造后台综合解决方案

课程章节：6-4 element-plus 项目介绍模块开发

课程讲师: Sunday

课程内容：

目标：实现个人中心左侧的项目介绍模块

核心点：通过给项目介绍模块划分组件一步步的去利用element-plusUI去实现左侧的项目介绍模块功能
实现步骤：

项目介绍从上到下可以分为三部分：

1. 头像区域
2. 项目介绍
3. 项目功能

对于这三块的数据而言，前面两个是直接在前端写死的，项目功能 是从服务端获取到的。

对于前端写死部分，我们已经在之前定义到了 i18n/lang 之下
而对于从服务端获取部分，我们就需要单独定义上接口了：

1. 创建 api/user.js 模块 去定义接口。
2. 因为该数据会同时在 ProjectCard 和 Feature 组件中使用，所以我们可以在 profile 中调用该接口获取数据，然后再把数据分别传入到两个子级组件中。所以我们在view/profile/index.vue中去获取数据
3. 传递数据到profile/components/ProjectCard.vue
4. 有了数据之后，接下来我们就可以去完成 项目介绍 模块：
   a.先处理头像区域 包含头像 姓名和角色
   b. 接下来是项目介绍区域。分为标题和简介。
   c.最后是项目功能区域，先接收项目功能的数据。再处理对应的视图。因为这一部分要用到我们的后台数据，所以要把后台数据引入进来进行动态的渲染。

课程收获：

谢谢老师，讲的通俗易懂，引导我们一步步去做。这一节主要是实战课，实现个人中心的左侧部分的功能，通过分部分拆解利用element-ui和api接口数据的动态结合和渲染，结构清晰的完成了本次课程的目标。在课程的学习中，学到了一个很实用的小tips。那就是下面引入组件的时候首字母大写，没有驼峰命名方法，引用组件的时候用的小写，这个时候会报错，说没有使用该组件，这个时候只需要在引入的上面一行添加一句忽视此ESLINT即可（// eslint-disable-next-line），这个方法我认为在未来的实际工作中也会被经常的使用到，很实用。

课程截图：