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

news2024/10/5 13:17:57

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

一、摸鱼与学习

摸鱼&感想

完善并提交上周需求修改：上周修没有修改移动端的（缺乏实际经验之前也没写过移动端的），还是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 >= 实际尺寸的。比如图是375*812的，而实际尺寸是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下面。