手记

【金秋打卡】第6天 全新升级,基于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),这个方法我认为在未来的实际工作中也会被经常的使用到,很实用。

课程截图:



0人推荐
随时随地看视频
慕课网APP