前端中的一些惯用做法（欢迎补充和修正）---未完，不断总结中

水不腐-枢不蠹

已于 2023-04-22 19:58:31 修改

阅读量285

点赞数

分类专栏：前端文章标签：前端

于 2023-02-14 10:46:44 首次发布

本文链接：https://blog.csdn.net/qq_45519787/article/details/129022566

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章讲述了前端开发中的几个常见优化技巧，包括Logo的SEO处理，简洁的网页底部版权设计，移动端箭头的触控区域设定，CSS属性书写顺序，以及在flex布局中设置子元素宽度的方法。此外，还提到了项目结构的组织，如API接口、静态资源、组件和路由的分层存放，以及如何利用Vuex管理和持久化用户Token。

摘要由CSDN通过智能技术生成

1 Logo 搜索引擎优化常用做法

加入<h1></h1>标签，输入主题，并让文字看不见
![在这里插入图片描述](https://img-blog.csdnimg.cn/156707d1f7fa4fd4850914827aa8e547.png

2 对于网页底部版权部分，可以简写

在这里插入图片描述

3 移动端箭头

对于移动端，箭头一般会留下宽44高44的触控范围；另外对于下面布局的一般写法，父级display:flex，设置内间距，左右图标设置宽高，中间设置flex:1，填入内容，然后就会把父级撑开
在这里插入图片描述

4 关于命名

template中唯一的根节点一般命名为“文件名+container”

在这里插入图片描述

接收作用域插槽的自定义属性的值时，一般用命名为scope来接收

<Left>
  <template #default="scope">
    <p>在Left 声明p标签</p>
    <p>{{ scope }}</p>
  </template>
</Left>

5 css属性书写顺序（一般）

在这里插入图片描述

6 flex布局的盒子，其子元素想要设置宽度

可以使用min-width

7 在实际项目中应该有的思想

目录结构调整（习惯做法）：会把项目使用的所有接口统一放到api文件夹中；静态资源，类似于图片之类的会放到assets文件夹中；公共组件会放到components文件夹中；路由放到router文件夹中；一些项目中使用的小工具（类似于请求模块request.js，本地储存的操作模块storage.js等）放到utils文件夹中；公共的样式（比如iconfont.css之类的）会放到styles文件夹中；项目中使用的组件放到views中
一般都会创建一个请求模块，设置本项目接口地址的基础路径，还会设置请求拦截器，把token放进去（只要是请求必然会先经过请求拦截器，这时如果是需要token的，就加上token再发送请求），这样就不用给每个需要token的接口分别设置
写样式的原则：将公共样式写到全局（src/styles/index.less），将局部样式写到组件内部
对于用户token的处理，因为好多接口都需要使用，一般放在vuex中，获取方便而且是响应式的，另外为了持久化，还需要把 Token 放到本地存储（这里可以把本地储存相关操作封装成模块）