记录前端工作中获得的经验（二）

1.一定一定要好好看组件库的api，而不是觉得自己基本会用就完事了，在实际工作中想要的效果往往和官网上的范例有出入，要学会用插槽，用他提供的api自定义内容。

2.注意类名的命名，遵循B__E--M的原则。

3.各种命名都一定要清晰，让人看得明白这是干嘛的。

4.antd要给a-table设置rowkey值，在使用表格时如果页面一直报错，看下是不是表格组件加了scroll的属性的原因，第一种方法是去掉这一属性， 第二种方法是给这个表格一些数据。

5.当使用的组件库和实际需要的效果不同时,就想些奇怪的办法,自己修改掉样式什么的。

6.如果在项目中使用的是pnpm，那就一直统一用这个，不要npm和pnpm混用！！！不然下载的依赖可能会有问题的。

7.import和const定义变量之间最好空一行。

8.记住安装依赖时-S和-D的区别， -S就是打包时也需要的依赖，即dependencies下的依赖，-D就是只有开发时才会用到的依赖，就是devDependencies下的依赖。

9.不乱嵌套div标签， 也不要加一些没用到的类名，不要滥用flex，没用的样式记得删掉。一定要规范代码的书写！

10.在项目中删除node_modules这个文件夹，可以试安装一个rimraf来删除。

11.如果在使用vue2的data时，最好使用data(){return{}}的形式而不是data：{}。因为这里存在对象引用的问题，会造成数据的污染，另外在vue3中，只能使用返回对象的函数形式了，不能使用对象方式了。

12.组件要用name命名，开头大写。如果是vue3的setup语法糖形式，那就用defineOptions来写,记得引入一下。

13.如果项目中有多个子项目，那就cd进入到单个的项目中然后就pnpm或者npm运行，第二种方式是pnpm --filter name(就是子工程的package,json的name) dev。记得如果是npm的话要加run，但是pnpm不用。另外如果是安装的话，npm是install，pnpm是add。

14.工作中遇到一个情况就是，我们公司有自己的依赖包，公司的另一个项目依赖于这个包，如果要使用这个包的话，可以使用npm上传，然后在项目中安装，但是这样很麻烦，因为我们写的依赖包要是有改动，就得重新上传了，所以我们选择软链接的方式。首先将在我们的依赖包项目中输入npm link，将这个包软链全局，让我们的项目可以用它。软链好以后，在我们的项目中就可以npm install+包名安装了，这个时候我们可以看到我们的node_modules中的依赖包有一个快捷方式的标志，说明他们指向同一个引用，只要我们的依赖包内容发生了改变，我们的项目里的依赖也是会同步改变的。

15.使用scss时想要修改vant中的原本样式，可以使用：：v-deep，不能使用/deep/会报错，如果是less的话两种都可以，CSS的话使用>>>

16.清除浮动的方法请一定要记住,我们vue2写移动端的话会用flex, 写PC项目不怎么用flex,所以还是会用到浮动的,如果想要清除浮动的话第一种就是给父元素添加overflow:hidden属性,第二种就是给子元素的最后加上一个空的元素,然后给这个空元素添加clear:both,display:block,visibility：hidden的属性。

17.如果发现用js或者在行内样式给元素添加transition属性不生效，但是在style中生效的话,试试把style中的scoped删掉。好像是因为hash的原因。

18.如果你发现你在{{}}写的东西渲染出来以后前面总是有莫名其妙的间隔，看看是不是因为换了行。

19.vue2中经常使用mixins,...mapState之类的,vue3使用的是hook，状态管理用的是pinia而不是vuex。git一定要好好学！！！一定要熟练的掌握在多人协同开发中的git使用,我后面学熟练以后写一期。

20.在gitlab还是其他托管平台添加分支以后，在本地项目中记得git fetch一下，获取最新的分支信息。

21.注意background的复合属性的写法， position一定要写在size属性前面，写成类似center/cover的格式。

22.昨天遇到一种情况,就是我要在轮播图中展示数据,一共八条数据,一页展示四条,然后我就在想怎么做,主管叫我可以使用lodash的chunk方法,可以将数组变成一个二维数组,还可以添加一个参数,决定你的二维数组要以几个元素为一组。

23.勤能补拙，不会就下班之后好好学，除了能力之外，态度也是非常非常重要的，想提升能力就得好好学，多问多思考，不会就问，能得到许多意外的收获。🫶🏻