在不斷的學習（摸魚）和實踐中，第二周也快要結束了，這周總體來說還是蠻不錯的比上周好很多（沒有那么拘謹？）。前面兩天一直在學習和摸魚之后就修改了幾個需求。這里記錄一下學習到的新知識、小技巧、小細節，順便再發表一下自己的小感想～
一、摸魚與學習
摸魚&感想
完善并提交上周需求修改：上周修沒有修改移動端的（缺乏實際經驗 之前也沒寫過移動端的），還是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下面。
- 快捷鍵：cm+c cm+v 快速復制下一行； cm+left/right定位到最左/右；cm+delete刪除整行；option+left/right左右移動。
三、寫在最后
- 反正前兩天沒什么活，在學習摸魚了~自我感覺上班比上課快樂（可能只是剛開始，希望以后也這么覺得）
- 第一次寫完了感覺沒什么問題，一定要多細心排查幾遍（真的很重要每次都被@太丟人了）
- 工作過程中收獲到的知識點可以記在todo list挺方便（Q哥教的好）
- 另一個實習生好像就是來做雜活的（很辛苦什么都要會一點，她經常加班），招實習生進來不就是干活嘛嗚嗚怎么可能讓我天天摸魚做好心理準備
- 愉快的一周吧~期待下周運動會雖然沒報名，帶薪去還是快樂的（但實習生沒有衣服區別對待，我社恐一個人好尷尬。。）
- 下周繼續摸魚&學習&工作吧。要制定一個自己的計劃了，規劃還是蠻重要的，好好想一下干什么。。。。
- 碎碎念也就寫在這里了，拜拜~下周繼續碎碎念
———— 作者：LJS)
