本文主要是介绍【金秋打卡】第6天 全新升级,基于Vue3最新标准,打造后台综合解决方案之项目介绍模块开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:全新升级,基于Vue3最新标准,打造后台综合解决方案
课程章节:6-4 element-plus 项目介绍模块开发
课程讲师: Sunday
课程内容:
核心点:通过给项目介绍模块划分组件一步步的去利用element-plusUI去实现左侧的项目介绍模块功能
实现步骤:
对于这三块的数据而言,前面两个是直接在前端写死的,项目功能 是从服务端获取到的。
对于前端写死部分,我们已经在之前定义到了 i18n/lang 之下
而对于从服务端获取部分,我们就需要单独定义上接口了:
- 创建 api/user.js 模块 去定义接口。
- 因为该数据会同时在 ProjectCard 和 Feature 组件中使用,所以我们可以在 profile 中调用该接口获取数据,然后再把数据分别传入到两个子级组件中。所以我们在view/profile/index.vue中去获取数据
- 传递数据到profile/components/ProjectCard.vue
- 有了数据之后,接下来我们就可以去完成 项目介绍 模块:
a.先处理头像区域 包含头像 姓名和角色
b. 接下来是项目介绍区域。分为标题和简介。
c.最后是项目功能区域,先接收项目功能的数据。再处理对应的视图。因为这一部分要用到我们的后台数据,所以要把后台数据引入进来进行动态的渲染。
课程收获:
谢谢老师,讲的通俗易懂,引导我们一步步去做。这一节主要是实战课,实现个人中心的左侧部分的功能,通过分部分拆解利用element-ui和api接口数据的动态结合和渲染,结构清晰的完成了本次课程的目标。在课程的学习中,学到了一个很实用的小tips。那就是下面引入组件的时候首字母大写,没有驼峰命名方法,引用组件的时候用的小写,这个时候会报错,说没有使用该组件,这个时候只需要在引入的上面一行添加一句忽视此ESLINT即可(// eslint-disable-next-line),这个方法我认为在未来的实际工作中也会被经常的使用到,很实用。
课程截图:
这篇关于【金秋打卡】第6天 全新升级,基于Vue3最新标准,打造后台综合解决方案之项目介绍模块开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!