项目结构
一级目录
- public 静态资源
- js
- css
- html
- front
- img
- global.config. （title, serverApiUrl,menuList）
- src 源码 都不要加s
- route
- api
- common 公用模块 业务和非业务都可以
- style
- util
- tpl 模板
- const 静态变量
- mock 模拟后端数据
- store 本地持久化
- view
- component
- asset
doc 文档
test
常用命名
class命名
- 统一小写
- 使用英语表达
- 尽量不要缩写
css 常用样式
- 样式库
- 样式重置
- 全局样式
- 类简写库( bg-blue ,bg-yellow 背景色简写)
- 基础组件
- 动画库
- 通用模板 (通用后台列表表格样式)
BEM 样式规范 Block__Element--Modifier
样式 命名空间
JS命名规范
函数前缀
函数命名
设计模式
https://refactoringguru.cn/design-patterns/decorator
设计模式很适合 ： 旧代码的整治
- 策略模式 主要用于替换 if else switch ，对象字面量，可以运用在 增删改查的 一些状态信息比如 title 通过字面量编辑对应的 [{"add":"新增"}，{"edit":"修改"}]
- 适配器模式： 后端多个数据字段 通过整合加工 返回新的字段
- 装饰者：基于原有属性 进行重新的包装输出， 可以运用在列表搜索的搜索条件(基础搜索框+ 条件组件)
技能提升
搜索
| baidu | github | |
|---|---|---|
| 文件类型 | 前端 filetype:pdf | |
| -不含特定词 | 前端 -设计 | 前端 -设计 |
| 双引号(完全匹配，不拆词) | "前端架构" | |
| site 指定网站 | 前端 site:juejin.com |
百度搜索技巧
- 文件类型 | 前端 filetype:pdf
- -不含特定词 | 前端 -设计
- 双引号(完全匹配，不拆词) |"前端架构"
- site 指定网站 | 前端 site:juejin.com
git搜索技巧
GitHub 有两个热门栏目，最新和最流行 GitHub Trend 和 GitHub Topic。
Awesome + 关键字 （查询优秀项目 ）
stars:>=5000 vue （查询star500个以上的项目 ）
关键字组合
qt in:name：表示在项目名称中搜索 qt 关键字
qt in:readme：表示在项目readme中搜索 qt 关键字
qt in:description：表示在 项目描述中搜索 qt 关键字
qt in:USERNAME：表示在USERNAME中搜索 qt 关键字
qt in:ORGNAME：表示在组织或机构名中搜索 qt 关键字
- 语言
language:javascript location:china
| stars: | |stars:>=500 |
| Awesome+关键字 | |Awesome Vue |
