前端实习周记2

yikina
291 阅读3分钟

前端实习周记2

本周完成了可视化首页大屏两个部分的搭建，使用滚动列表封装组件，修改样式，使用蓝湖工具，导出js图片，遇到了诸如使用浏览器开发者工具正确定位样式位置和类名、样式优先级覆盖、git提交报错等问题。

git提交报错——git stash解决

git提交时因为远程仓库还没有给我权限，提交后又再次提交，出现了‘ 工作区签名不一致 ’的问题，刚好同组前辈在，就用git stash帮我解决了，遂自己也看了看相关原理及应用。

git stash 命令用于暂时保存没有提交的工作。运行该命令后，所有没有commit的代码，都会暂时从工作区移除，回到上次commit时的状态。它处于git reset --hard（完全放弃还修改了一半的代码）与git commit（提交代码) 命令之间，很类似于“暂停”按钮。

git stash适用于想要保存当前的修改,但是想回到之前最后一次提交的干净的工作仓库时进行的操作.git stash将本地的修改保存起来,并且将当前代码切换到HEAD提交上.通过git stash存储的修改列表,可以通过git stash list查看.git stash show用于校验,git stash apply用于重新存储.直接执行git stash等同于git stash save.比较常用的 git stash pop：将保存的修改与当前工作区合并

适用场景：

  • 开发还未完成时，需要同步远程代码：如文件无冲突，直接pull即可，若有冲突，需要先git stash目前的工作区文件，再git pull拉取最新代码，最后git stash pop把代码和当前工作区合并

    git stash
git pull
git stash pop

  • 搁置目前需求，去做别的需求：将目前的代码git stash保存起，随后完成别的需求，完成后git stash pop出来

    git stash
...git commit 'feat: add items'
git stash pop

样式定位及覆盖

在使用组件时，组件的样式，即node_modules中的css文件不是我们所期待的样子时，我们可以利用项目中的样式隔离方案，提高需要的样式优先级，覆盖掉原有的配置，譬如sass方案或者是css-in-js方案，但在修改样式时如何定位该样式的类名和判断修改是否成功也是一个很重要的环节。

浏览器工具定位样式：

使用谷歌浏览器的ctrl+shift+c选取想要的element即可在旁边的style看到所需要的样式，在此可以看到样式的类名，可以进行删除修改添加操作，判断是否定位到正确的样式，随后在对应的sass文件中进行修改即可，这里要注意scss样式类名嵌套关系，我就是因为一个嵌套关系改错了导致样式不生效（要细心呐！）

综合导出图片

将图片全部都引入一个文件夹，用js或ts文件import、export，例如js文件img.js里面export的alarmItem文件，到时候引入的时候img.alarmItem。

  • 文件夹目录
-src
---img
-----img.js
-----alarmItem.png
-----header.png
  • img.js编写
import alarmItem from ./alarmItem.png
import header from ./header.png

export default {
    alarmItem,
    header
}
  • 使用图片
import HomeImg from '&/imgs'
...
 <img src={HomeImg.alarmItem} />

配置引用文件

如项目中的vite.config.js配置了

'&': path.resolve(process.cwd(), './src')

那么每次我们引用src下的文件时就这么&/imgs引用即可，不必再过多嵌套，否则可能会导致报错

avatar
文章
阅读
粉丝