实习手记（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 >= 实际尺寸的。比如图是375*812的，而实际尺寸是1000*2000（举个例子），那么就要选择3倍导出。
坑点3：图片还未加载完毕异常提前显示。具体的：看代码吧。

<script setup lang="ts">const showVideoSwipper = ref(false);//1.刚开始设置为falseonMounted(() => {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下面。