1. Toy模板网首页
  2. > Toy博客

三、创建各个展示模块组件

9月前 作者：shaoin_2 分类：Toy博客 阅读(22) 违法举报

这篇具有很好参考价值的文章主要介绍了三、创建各个展示模块组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介

在文件 components 中创建轮播模块组件，引入App.vue展示。⭐️ 欢迎访问个人的简历网站预览效果

本章涉及修改与新增的文件：First.vue、Second.vue、Third.vue、Fourth.vue、Fifth.vue、App.vue、vite-env.d.ts、assets

三、创建各个展示模块组件,个人简历网站,vue.js,typescript,node.js

一、修改vite-env.d.ts文件

/// <reference types="vite/client" />

// 引入自定义组件时需要的代码
declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

二、新增组件

  1. 新建 First.vue 个人首页
<template>
  <div class="container">
    <!-- 头像 -->
    <el-avatar :size="120" :src="avatarImg" />

    <!-- 座右铭 -->
    <div class="motto text-spacing">
      <span>
        <span v-for="(item, index) of textArr" :key="index">
          {{ item.text }}
        </span>
      </span>
      <el-divider />
    </div>
    <!-- 简单信息 -->
    <div class="info">
      <div class="margin-tb-xl">吴少繁</div>
      <div>全栈工程师</div>
      <div class="margin-tb-xl flex">
        <div><img src="/email.svg" class="logo" alt="Email" />1195951949@qq.com</div>
        <div class="margin-lr"> | </div>
        <div><img src="/phone.svg" class="logo" alt="Phone" />18226193345</div>
      </div>
      <div>在职 · 浙江杭州</div>
    </div>
  </div>
</template>
<script setup lang="ts" name="First">
import avatarImg from '../assets/avatar.png'
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});
const textArr = reactive([
  { text: '知微知彰，', checked: false },
  { text: '知柔知刚；', checked: false },
  { text: '富在术数，', checked: false },
  { text: '不在劳身；', checked: false },
  { text: '利在势居，', checked: false },
  { text: '不在力耕。', checked: false }
])
</script>

<style scoped>
.info {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: 'KaiTi', sans-serif;
}

.logo {
  margin-right: 5px;
  width: 18px;
  height: 18px;
}
</style>
  1. 新建 Second.vue 基本信息
<template>
  <div class="container">
    <!-- 标题 -->
    <div class="motto">
      <span style="font-size: 30px;">基本信息</span>
      <el-divider />
    </div>
    <!-- 简介 -->
    <div class="intr text-spacing">
      毕业于云南大学软件工程专业，从业四年有余，熟习js和node前后端开发，熟习Vue和nestjs框架开发，熟习uniapp跨平台开发小程序及H5等。
    </div>

    <div class="margin-top-xl flex padding-top family" style="width: 60%;">
      <div class="flex justify-center" style="width: 40%;">
        <el-avatar :size="220" :src="avatarImg" />
      </div>
      <div style="width:30%">
        <div>姓名 | 吴少繁</div>
        <div class="margin-tb-xl">性别 | 男</div>
        <div>出生 | 1996.01.13</div>
        <div class="margin-tb-xl">居住 | 浙江杭州西湖区</div>
        <div>学历 | 本科</div>
        <div class="margin-tb-xl">专业 | 软件工程</div>
      </div>
      <div style="width:30%">
        <div>手机 | 18226193345</div>
        <div class="margin-tb-xl">邮箱 | 18226193345@163.com</div>
        <div>QQ号 | 1195951949</div>
        <div class="margin-tb-xl">户籍 | 安徽合肥</div>
        <div>学校 | 云南大学</div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts" name="Second">
import avatarImg from '../assets/avatar.png'
defineProps({
  count: {
    type: Number
  },
});
</script>

<style scoped>
.family {
  letter-spacing: 1px;
  line-height: 1.2;
  font-family: 'KaiTi', sans-serif;
}
</style>
  1. 新建 Third.vue 教育经历
<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">教育经历</span>
      <el-divider />
    </div>
    <!-- 简介 -->
    <div class="intr text-spacing">
      <span v-for="(item, index) of textArr" :key="index">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div class="flex flex-direction justify-between align-center padding-tb" style="width:15%;min-width: 130px;">
        <div class="yunnan sphere" />
        <div class="duyi sphere" />
      </div>

      <el-divider direction="vertical" style="height: 100%;" />
      <div class="family padding-left-xl" style="width:85%">
        <div class="square">
          <div>学习时间：2015.09 - 2019.07</div>
          <div class="margin-tb-xs">学习技能：</div>
          <div>·计算机安全，程序设计语言，数据库，数据结构，软件开发工具，操作系统，设计模式等</div>
          <div class="margin-top-xs">·基本办公软件，Word文档，PPT，Excel，Ps，VScode</div>
        </div>
        <div class="square margin-top-xl">
          <div>学习时间：2019.08 - 2019.12</div>
          <div class="margin-tb-xs">学习技能：</div>
          <div>·掌握了 HTML、HTML 5、CSS、CSS3、JavaScript 开发标准</div>
          <div class="margin-top-xs">·掌握了 Vue全家桶、Vuex 状态管理；Vue-Router路由前端搭建框架标准</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Third">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});

const textArr = reactive([
  { text: '夫学须志也，', checked: false },
  { text: '才须学也。', checked: false },
  { text: '非学无以广才，', checked: false },
  { text: '非志无以成学。', checked: false },
])
</script>

<style scoped>

.family {
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: 'KaiTi', sans-serif;
}

.sphere {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: 100% 100%;
  box-shadow: 3px 3px 3px 3px rgba(10, 10, 10, .2);
}

.square {
  position: relative;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(10, 10, 10, .3);
  box-shadow: 6px 5px 2px 2px rgba(10, 10, 10, .3);
}

.square::before {
  position: absolute;
  content: '';
  z-index: 20;
  left: -30px;
  top: 50px;
  border: 15px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 15px solid rgba(10, 10, 10, .3);
}

.yunnan {
  background-image: url('../assets/yunnan.png'); // 学校图片
}

.duyi {
  background-image: url('../assets/duyi.png'); // 培训图片
}
</style>
  1. 新建 Fourth.vue 专业技能

<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">专业技能</span>
      <el-divider />
    </div>
    <!-- 简介 -->
    <div class="intr text-spacing">
      <span v-for="(item, index) of textArr" :key="index">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div style="width: 40%;padding-right:50px">
        <div class="margin-bottom">
          <span style="font-style: italic;">JavaScript、TypeScript</span>
          <el-progress color="#F05D4B" :percentage="95" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">HTML、HTML5</span>
          <el-progress color="#e03997" :percentage="96" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">CSS、CSS3</span>
          <el-progress color="#fbbd08" :percentage="92" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>

        <div class="margin-bottom">
          <span style="font-style: italic;">Vue、Vue3</span>
          <el-progress color="#42b883" :percentage="98" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">Uniapp、小程序</span>
          <el-progress color="#0081ff" :percentage="95" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">Nodejs、Nestjs</span>
          <el-progress color="#39b54a" :percentage="93" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">React</span>
          <el-progress color="#149eca" :percentage="90" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
      </div>
      <ul class="family">
        <li>掌握 HTML、HTML 5、CSS、CSS3、JavaScript、TypeScript 标准；</li>
        <li class="margin-tb-lg">掌握 ES6，箭头函数、class 类、Promise 对象、ES6 模块化、异步async 等</li>
        <li>掌握 Vue2全家桶、Vue3全家桶、vite构建工具；Vuex 状态管理；Vue-Router路由；</li>
        <li class="margin-tb-lg">掌握 element-UI、AntD-UI、element-UI-Plus；Vant-UI、color-UI、uView-UI 等组件库；</li>
        <li>掌握 React全家桶、Redux状态管理、React-router-dom路由；</li>
        <li class="margin-tb-lg">uniapp、H5、微信、支付宝小程序开发技术等；</li>
        <li>掌握 Nodejs，Mysql，Java；nestjs、websockets后端接口开发框架等，宝塔服务器、Nginx代理相关操作；</li>
        <li class="margin-tb-lg">掌握 Electron 桌面应用开发；</li>
        <li>掌握打包工具 Webpack 的基本使用；</li>
        <li class="margin-top-lg">掌握Git，SVN 进行版本控制和代码托管；</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts" name="Fourth">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});

const textArr = reactive([
  { text: '生于忧患，', checked: false },
  { text: '死于安乐；', checked: false },
  { text: '力学如力耕，', checked: false },
  { text: '勤惰尔自知；', checked: false }
])

</script>

<style scoped>
.family {
  font-family: 'KaiTi', sans-serif;
  letter-spacing: 1px;
  line-height: 1.2;
}
</style>
  1. 新建 Fifth.vue 工作经验
<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">工作经验</span>
      <el-divider />
    </div>

    <div class="intr text-spacing">
      <span v-for="(item, index) of textArr" :Key="index">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div class="flex flex-direction justify-around align-center padding-tb" style="width:15%;min-width: 140px;">
        <div class="sphere" style="backgroundColor: #F05D4B;">
          <span>24个月 +</span>
          <span class="text18">浙江怡宁健康</span>
        </div>
        <div class="sphere" style="backgroundColor: #1cbbb4;">
          <span>19个月</span>
          <span class="text18">杭州云号科技</span>
        </div>
      </div>

      <el-divider direction="vertical" style="height: 100%;" />
      <div class="family padding-left-xl" style="width:85%">
        <div class="square">
          <div>工作时间：2021.10 - 至 今</div>
          <div class="margin-tb-xs">担任岗位：前端开发组长</div>
          <div>工作内容：</div>
          <div class="margin-tb-xs">
            <div>·参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；</div>
            <div>·项目技术框架搭建，业务逻辑梳理，结构框架搭建，技术栈选型，研究新技术优化项目代码，不定期组内成员code review分享经验心得；</div>
            <div>
              <span>·开发维护</span>
              <el-link class="margin-left-sm text15" type="warning">智慧医院数据中心</el-link>
              <el-link class="margin-left-sm text15" type="warning">怡宁SaaS智慧医院</el-link>
              <el-link class="margin-left-sm text15" type="warning">康宁智慧医院</el-link>
              <el-link class="margin-left-sm text15" type="warning">怡宁心理智慧医院</el-link>
            </div>
          </div>
          <!-- 公司各类项目趋于稳定，实行降本增效，只留下领导层，被动离职。 -->
          <div>离职原因：</div>
        </div>
        <div class="square margin-top-xl">
          <div>工作时间：2020.03 - 2021.10</div>
          <div class="margin-tb-sm">担任岗位：前端开发程序员</div>
          <div>工作内容：</div>
          <div class="margin-tb-xs">
            <div>·完成每日规划的项目任务，同步及跟进任务进度，按时交付项目内容；</div>
            <div>·梳理业务逻辑，结构框架搭建，技术栈选型，UI模型设计，PC端后台开发，uniapp H5开发</div>
            <div>
              <span>·开发维护</span>
              <el-link class="margin-left-sm text15" type="warning">试客秀管理后台</el-link>
              <el-link class="margin-left-sm text15" type="warning">秀咖用户端</el-link>
              <el-link class="margin-left-sm text15" type="warning">智慧社区</el-link>
            </div>
          </div>
          <div>离职原因：初创公司，灰色边缘性业务，受到各平台打压管控，最终解散倒闭。</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Fifth">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});

const textArr = reactive([
  { text: '民生在勤，', checked: false },
  { text: '勤则不匮。', checked: false },
  { text: '勤劳一日，', checked: false },
  { text: '可得一夜安眠；', checked: false },
  { text: '勤劳一生，', checked: false },
  { text: '可得幸福长眠。', checked: false }
])
</script>

<style scoped>
.family {
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: 'KaiTi', sans-serif;
}

.sphere {
  min-width: 130px;
  min-height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 3px 3px rgba(10, 10, 10, .2);
}

.square {
  position: relative;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(10, 10, 10, .3);
  box-shadow: 6px 5px 5px 5px rgba(10, 10, 10, .3);
}
.square::before {
  position: absolute;
  content: '';
  z-index: 20;
  left: -30px;
  top: 80px;
  border: 15px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 15px solid rgba(10, 10, 10, .3);
}
</style>
  1. 将组件引入 App.vue 中展示
<template>
  <div class="app-background">
    <el-carousel height="100vh" direction="vertical" :autoplay="false">

      <el-carousel-item>
        <first />
      </el-carousel-item>
      <el-carousel-item>
        <second />
      </el-carousel-item>
      <el-carousel-item>
        <third />
      </el-carousel-item>
      <el-carousel-item>
        <fourth />
      </el-carousel-item>
      <el-carousel-item>
        <fifth />
      </el-carousel-item>

    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import first from './components/First.vue'
import second from './components/Second.vue'
import third from './components/Third.vue'
import fourth from './components/Fourth.vue'
import fifth from './components/Fifth.vue'
</script>

<style scoped>
.app-background {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('./assets/bgBig.png');
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}

.el-carousel__item {
  min-height: 100vh;
  background-color: rgba(10, 10, 10, 0.3);
}
</style>

效果如下：文章来源地址https://www.toymoban.com/news/detail-708613.html

三、创建各个展示模块组件,个人简历网站,vue.js,typescript,node.js 三、创建各个展示模块组件,个人简历网站,vue.js,typescript,node.js 三、创建各个展示模块组件,个人简历网站,vue.js,typescript,node.js
三、创建各个展示模块组件,个人简历网站,vue.js,typescript,node.js 三、创建各个展示模块组件,个人简历网站,vue.js,typescript,node.js
=> To Be Continued
点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏

到了这里，关于三、创建各个展示模块组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 应届生求职个人简历模板（合集）

    应届生求职个人简历模板（合集）

        应届生求职个人简历模板1   基本信息   姓 名： 性别：   婚姻状况： 民族：   户 籍： 年龄：   现所在地： 身高：   联系电话：   电子邮箱：__   求职意向   希望岗位：Web前端开发   工作年限： 职称：无职称   求职类型：全职   到岗时间：随时   工作

    2024年02月08日
    浏览(48)
  • 2023个人简历的范文参考（合集）

    2023个人简历的范文参考（合集）

        2023个人简历的范文参考【篇1】   基本信息   姓名：__   性别：__   出生日期：__   籍贯：__市   目前城市：__市   联系电话：__   E-mail：__   应聘方向   求职行业：金融/投资/证券，银行，保险   应聘职位：投资/基金项目经理，投资/理财顾问，客户主管/专

    2024年02月09日
    浏览(43)
  • VUE好看的个人简历模板

    VUE好看的个人简历模板

    作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/135548970 VUE好看的个人简历模板 ，个人主页模板，模板源码包括首页、关于我、我的资历、项目经验、我的技能、联系我等模块，把自己优秀的一面和优秀的经历都展示出来，可以在这个模板下借用相关代码，代

    2024年01月19日
    浏览(45)
  • web前端课程作业设计：个人简历

    web前端课程作业设计：个人简历

    今天博主的web前端选修课结课了，期末大作业也提交了，今天写一篇博客把我的大作业分享给大家。 个人简历主页设计 应尽量包含以下内容： Ø 包含个人基本信息、教育背景、个人风采、与我联系四块内容 Ø 在页面组织上，以上内容可以通过主页链接到不同页面，也可以放

    2024年02月08日
    浏览(45)
  • 利用html+css制作个人简历

    利用html+css制作个人简历

    使用html和css制作一份个人简历； 软件：IntelliJ IDEA 2022.3.2 Ultimate 效果演示： 俗话说的好：工欲善其事必先利其器。首先需要认识html代码的各个部分以及常用的属性； link 标签用于关联当前HTML页面与其他资源的关系，关系通过 rel 属性指定，这里使用的是icon表示这个文件是当

    2024年02月07日
    浏览(99)
  • 安全运维工程师个人简历

    安全运维工程师个人简历

    一份精心撰写的个人简历是迈向成功职业生涯的第一步。以下是小编精心整理的安全运维工程师简历案例，同时，幻主简历网提供海量优质简历模板和在线制作工具，助大家轻松撰写出专业、出色的安全运维工程师简历，欢迎大家来参考。 求职意向 求职类型：全职nbsp;nbsp;

    2024年03月28日
    浏览(43)
  • THREE.JS实现个人简历网站

    THREE.JS实现个人简历网站

    最近，在github上面找到了一个不错的技术介绍网站，主要使用 html+css+js 原生三件套写的。我在此基础之上利用three.js加了一点3D元素在里面，让这个网站看起来更炫酷。 改的时候，感觉原生还是比不上框架来的方便，后续有时间我会抽离一个 vue组件 的版本。 在线访问 ：个人

    2024年02月01日
    浏览(43)
  • 程序员个人简历范本（精选5篇）

    程序员个人简历范本（精选5篇）

    HR浏览一份简历也就25秒左右，如果你连「好简历」都没有，怎么能找到好工作呢？ 如果你不懂得如何在简历上展示自己，或者觉得怎么改简历都不出彩，那请你一定仔细读完。 性别 男 年龄 24 学历 本科 张三 专业 计算机科学与技术 毕业院校 清华大学 毕业院校 github.io 个人

    2024年02月03日
    浏览(41)
  • 微信小程序个人简历界面（编辑版）

    微信小程序个人简历界面（编辑版）

    1、微信小程序实现简单的个人简历界面，包含基本信息、教育背景、获奖证书、兴趣爱好等，简历信息支持修改编辑内容。 2、通过此文章，希望能带给更多学习微信小程序的伙伴们一点点经验，示例简洁，布局简单，喜欢的小伙伴，可以进我主页，分享更多学习经验和示例

    2024年02月12日
    浏览(43)
  • 云计算工程师个人简历（精选篇）

    云计算工程师个人简历（精选篇）

    对于这样一群云计算工程师精英而言，如何将自己的专业技能与丰富经验准确地呈现在简历上，就显得尤为重要。以下是小编精选的云计算工程师个人简历参考，同时，幻主简历网还提供精美简历模板以及简历在线制作工具，欢迎大家阅读收藏。 幻主简历huanzhucv.com案例： 求

    2024年04月25日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包