实习手记（2）：前端菜鸟的摸鱼与成长

在不断的学习（摸鱼）和实践中，第二周也快要结束了，这周总体来说还是蛮不错的比上周好很多（没有那么拘谨？）。前面两天一直在学习和摸鱼之后就修改了几个需求。这里记录一下学习到的新知识、小技巧、小细节，顺便再发表一下自己的小感想～

一、摸鱼与学习

摸鱼&感想

完善并提交上周需求修改：上周修没有修改移动端的（缺乏实际经验之前也没写过移动端的），还是Q哥帮忙修改的（不得不表扬一下）。然后让我提交，好吧我竟然还不太熟悉。

看知识框架&面试题：这个就不多说了，改需求的就是给公司干的，学习是自己得到的（嗯有道理）。

学习新知识与回顾：其实看这些我记不住太多，反正知道怎么去改组件的一些样式还有怎么使用就好了。

Ant Design vue
Vue

收获

规范修改提交流程：记得安装一下git插件。add--》commit 「提交的修改信息要规范：例如更新feat（编号）：修改的内容」--》git push--》在jenkins上选择对应的项目--》点击build now等待构建完毕。
移动端修改：通过v-if="ifMatched"和@media 关键字当当视口宽度小于或等于某一特定值时，媒体查询内的样式会被应用，以适应移动端。例如：

@screen-mobile-width: 768px; // 设定移动端的断点宽度

@media (max-width: @screen-mobile-width) {//要修改的样式}

二、实践中成长

实践

（1）修改官网弹框遮罩层背景颜色：就是之前的弹框遮罩层颜色太黑了改了个颜色。

这里要注意哪里用到了弹框AModal哪里就要修改，不要漏了。
知识点小记** :deep**是一个深度选择器，接下来的样式会穿透scoped的限制，去影响到子组件的元素。

:deep(.ant-modal-mask) {
  background-color: rgba(102, 102, 102, 0.4);
}//这里其实不用deep也可以

  // deep的使用
  // 这里子组件的:deep会穿透scoped边界，并向下查找所有匹配.my-custom-class的选择器，包括子组件内部的元素，所以就影响到了子组件内部的inner element。
  //ParentComponent.vue
  <template>
    <ChildComponent class="my-custom-class" />
  </template>

  <style scoped>
    .my-custom-class {
      color: red;
    }

    :deep(.my-custom-class) {
      color: blue;
    }
  </style>

      
  //ChildComponent.vue
  <template>
    <div class="inner-element">I'm in the child component</div>
  </template>

  <style scoped>
    .inner-element {
    /* blue */
  }
</style>

（2）表单项样式修改：修改了一个模特上传表单的样式。

由于这里只需要给文字换一下样式，就使用了一个插槽把文字拿出来单独设置一个class，然后去修改样式。

<template>
  <AFormItem name="name">
    <template #label>
      <span class="model-name">{{ xxx }}</span>
    </template>
    <AInput/>
  </AFormItem>
</template>
<style scoped>
  .model-name {
    color: #ffffff99;
    font-weight: 400;
    font-size: 14px;
  }
</style>

（3）首页banner修改：修改背景视频、文字和按钮的层级样式，以及添加蒙层。

知识点小记1：使用v-html="t('global_home_text')"， v-html则将数据作为HTML代码解析并渲染，所以不使用v-html识别不出来br换行。
知识点小记2：绝对定位会脱离文档流，要给父容器添加position:relative，让子容器相对于父容器进行定位（子绝父相），不脱离文档流。需要更多了解的是BFC。这里先不写了后续写了再更新。
知识点小记3：设置不同的层级可以使用** z-index**，但只对具有定位（position）的元素生效。

<body>
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
</body>
<style>
  #div1 {
    position: absolute;
    z-index: 1; /* 层级最低 */
  }
  
  #div2 {
    position: absolute;
    z-index: 2; /* 中间层级 */
  }
  
  #div3 {
    position: absolute;
    z-index: 3; /* 层级最高 */
  }
</style>

知识点小计4：需要判断移动端和中英文，显示相应的四个不同图片。有两个方法，一种是使用双重三元运算符，另一种是使用映射表。

<template>
    <div>
        <img :src="imageSrc" />
    </div>
</template>

<script lang="ts" setup>
    import CnPc from '@assets/CnPc.png';
    import EnPc from '@assets/EnPc.png';
    import CnMobile from '@assets/CnMobile.png';
    import EnMobile from '@assets/EnMobile.png';
  
    const isMobile = ref(false);
    const isCN = ifCNLocale();
    // 第一种双重三元运算符，外层先判断是否移动端，内层判断中英文。
    // 但是还是不要有这个了，双重的话确实难以理解。。。
    // const imageSrc = isMobile ? (isCN ? CnMobile : EnMobile) : (isCN ? CnPc : EnPc);
    // 第二种映射
    const imageSrcMap = {
        ['pc']: {
            'zh-CN': CnPc,
            en: EnPc,
        },
        ['mobile']: {
            'zh-CN': CnMobile,
            en: EnMobile,
        },
    };
    const imageSrc = ref('');
    onMounted(() => {
        isMobile.value = matchMobile();
        imageSrc.value = imageSrcMap[isMobile.value ? 'mobile' : 'pc'][isCN ? 'zh-CN' : 'en'];
    });
</script>

坑点

坑点1：图片无法显示。（1）图片也是一个模块，需要import引入 （2）检查有无拼写错误。之后才发现是大小写错了（尴尬不敢说话）。一定要cv能复制就复制避免拼写错误、英文大小写问题。（3）最后还不行就重新启动项目。
坑点2：图片模糊。切图导出的时候选择图片n >= 实际尺寸的。比如图是375812的，而实际尺寸是1000*2000（举个例子），那么就要选择3倍导出。
坑点3：图片还未加载完毕异常提前显示。具体的：看代码吧。

<script setup lang="ts">
  const showVideoSwipper = ref(false);//1.刚开始设置为false
  
  onMounted(() => {
      setTimeout(() => {
          showSwipper.value = true;
      }, 1000);
  });//2.设置定时器，在组件挂载后等待1秒，将showVideoSwipper的值从false变为true
</script>

<template>
  <div class="home-container">
      <!-- 首页轮播组件carousel -->
      <a-carousel autoplay :autoplaySpeed="7000">
        <!-- 3.设置class：当showSwipper为false时，hide类将被添加到banner内，从而使banner透明度为0 -->
          <Banner :class="{ hide: !showSwipper }" />
      </a-carousel>
  </div>
<template>

  
<!-- Banner.vue内 -->
<style lang="less" scoped>
<!-- 4.组件内部设置opacity: 0; -->
.hide {
  opacity: 0;
}
</style>
<!-- 5.最后的结果就是，会黑屏（不可见）一秒之后再显示轮播图 -->

技巧

修改调试技巧：先通过检查在界面修改样式，会更方便直观，调试好之后，再去项目里面修改代码，速度就快很多了（显然我还没有习惯）。
项目无法显示，显示500内部错误：（1）看提示的错误原因，自己修改了哪里，初步定位错误原因（2）查看代码编写是否错误（3）使用log看哪一步没有显示出来（4）重启（比较浪费时间，最后在这样做）
移动文件夹命令： pwd 查看当前目录，mv 原路径目标路径。例如：mv /Users/item/xxxx/ssss /Users/item/ 就是把ssss移动到item下面。
快捷键：cm+c cm+v 快速复制下一行； cm+left/right定位到最左/右；cm+delete删除整行；option+left/right左右移动。

三、写在最后

反正前两天没什么活，在学习摸鱼了~自我感觉上班比上课快乐（可能只是刚开始，希望以后也这么觉得）
第一次写完了感觉没什么问题，一定要多细心排查几遍（真的很重要每次都被@太丢人了）
工作过程中收获到的知识点可以记在todo list挺方便（Q哥教的好）
另一个实习生好像就是来做杂活的（很辛苦什么都要会一点，她经常加班），招实习生进来不就是干活嘛呜呜怎么可能让我天天摸鱼做好心理准备
愉快的一周吧~期待下周运动会虽然没报名，带薪去还是快乐的（但实习生没有衣服区别对待，我社恐一个人好尴尬。。）
下周继续摸鱼&学习&工作吧。要制定一个自己的计划了，规划还是蛮重要的，好好想一下干什么。。。。
碎碎念也就写在这里了，拜拜~下周继续碎碎念

标签：前端前端实习

本文转载自: https://blog.csdn.net/m0_73560798/article/details/140232370
版权归原作者 椰果uu 所有，如有侵权，请联系我们删除。

实习手记（2）：前端菜鸟的摸鱼与成长

一、摸鱼与学习

摸鱼&感想

收获

二、实践中成长

实践

坑点

技巧

三、写在最后

发表评论

“实习手记（2）：前端菜鸟的摸鱼与成长”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航