Vue实战第2章:简单的分配页面布局
Vue 简单 实战 页面 布局 分配
2023-09-11 14:19:58 时间
本篇在讲什么 本篇作为Vue实战的第二章,跟代码逻辑无关,主要是简单的先设计一下个人网站的各个模块内容,明确一下我们想要将网站做出什么样子 本篇的特色 具有全流程的图文教学 重实践,轻理论,快速上手 提供全流程的源码内容 |
![]() ★提高阅读体验★ 👉 ♠ 一级标题 👈👉 ♥ 二级标题 👈👉 ♣ 三级标题 👈👉 ♦ 四级标题 👈 |
♠ 需求
因为本次的建站需求是想要做一个简单的个人介绍,所以目前需求大概如下
- 包含简单的个人介绍和人物样貌
- 包含个人的工作经历和发展规划
- 包含个人作品介绍和参与内容部分
- 包含个人能力介绍
♠ 主页
♥ 顶部导航栏
个人不需要什么花里胡哨的页面,简而美即可,上方的导航栏我们参照各类博客页面和一些VuePress的开源主题来作参考,如下图所示:
顶部导航栏基本包含主页按钮、个人简介、工作经历、能力等二级页面跳转按钮即可
♥ 主页内容页
内容页主页包含任务头像或Logo,背景做动图设计、在Logo下方添加个人网页的跳转按钮,例如github、CSDN等,效果如下图所示
♥ 个人经历页
个人经历页面主要介绍自工作来就职的公司历程,这里希望做成时间线性样式
♥ 个人作品页
个人作品页主要介绍曾参与制作的项目,这里想做成带边栏选择的切换展示效果
♥ 个人能力页
此页面和作品页效果保持一致,带边栏选择的切换展示效果,介绍页面可以做成markdown图床或者直接Vue页面即可
♠ 推送
- Github
https://github.com/KingSun5
♠ 结语
基本内容页的显示就是这个样子,剩下就是一步一步去把所有效果做出来了,因为博主接触前端内容很少,所以后续的设计和代码结构上可能有诸多问题,望谅解,后边整体做完了在贴个地址上来,若是觉得博主的文章写的不错,不妨关注一下博主,点赞一下博文,另博主能力有限,若文中有出现什么错误的地方,欢迎各位评论指摘。
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue_(Router路由)-vue-router路由的基本用法
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue.js - 解决vue-cli打包后自动压缩代码
- vue-resourse简单使用方法
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue + TS] Write a Vue Component as a Class in TypeScript
- vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
- 把vue项目或者html项目打包成桌面应用的简单方法:使用electron-packager打包electron应用
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue拦截器qs踩坑记录:qs.parse()、qs.stringify()使用方法,以及数组参数处理
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 一个简单的模态框modal可以在html和vue里都可以使用
- CDN方式Vue组件注册
- Vue基于$attrs及$listeners实现隔代通信
- Vue CLI的理解
- Vue中vue-i18n结合vant-ui实现国际化
- 169:vue+openlayers 根据多边形坐标,获取面积值
- 126:vue+openlayers 加载谷歌地图(另一种URL方式)
- Vue(二)vue 指令及用法举例
- Vue中组件间通信的6种方式
- 【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能
- 小白的 Vue + Element-Ui 前端开发框架的构建