须知: 以下均为实际开发中用到的物料与规范,在此留存,会持续完善内容,同时欢迎各位补充!
一.开发与命名规范
-
约定
- 文件必须添加头部解释说明,用以概括当前文件的主要作用
- 相同内容的 UI 或者内容被使用 2 次以上,务必封装成组件
- 临时数据如果过长,必须新建一个 js 用来放置临时数据,如当前页的 data.js
- 提交代码前务必执行 eslint 校验并自行删除 console 输出,保持代码的整洁度
- 项目采用懒加载形式,请自行补充 element,eachrt 等依赖的导出值
- 项目布局尽可能以 flex 布局为主要写法,少用或尽量不用 absolute 等定位方式
- 编码时尽可能使用 ES 高级操作,如 filter，reduce，some ，every
-
控件显示隐藏 以 show 开头 如:showOpenDialog
-
条件判断 以 is 开头 如:是否是管理员 isAdmin | 是否开启 isOpen
-
事件 以 handle 开头, 如 @change @input 等事件, @click 除外
-
表单 以 form 结尾, 如 tagForm
-
数组 以 list 开头, 如 listTag
-
对象集合 以 obj 开头,如 objTag
-
v-for 循环, 禁止命名为 item 和 index, 应命名为当前循环内容的简称,如: tagItem,tagIndex
-
单独字段,尽可能以 curr 开头, 如:当前搜索 currSearch | 当前活动条目 currActive
-
方法函数内的临时变量,尽量以 temp 开头,如:tempName | tempListValue
-
组件引用时,用绝对路径,如:@/components/xxx.vue ,方便其它页面引入
-
路由 Router
- 命名 禁止使用大写,统一使用小写,如遇多层含义,以下划线分隔,如: applist | app_list
- 标题头 必须添加标题头 title
- 页面引入 必须使用懒加载形式 component()=>import(‘xxx.vue’)
-
Echart 图表使用时,必须先写成组件然后再引入到具体的页面中,便于多次利用及代码整洁
-
Css 操作
总体目标是向原子化靠拢，复用性高。 可以参考 Tailwindcss
- 常用量写入到 base.css 如 margin-left:5px 写为 ml5
- 样式可先写入到组件内，如多处用到，则需写入到公共文件
二.VsCode 插件扩展
- Auto Close Tag 自动添加结束标签
- Auto Rename Tag 自动重命名标签
- Path Intellisense 路径自动补充
- vscode-icons vscode 图标
- Chinese VsCode 中文
- Easy Sass Less 扩展
- Sass Lint 样式格式化
- Html css Support
- Eslint 代码规范
- KoroFileHeader 头部生成注释说明
- Prettier 代码美化
- Vetur vue | Volar 语法支持
- EditorConfig for VsCode 统一编辑器配置
三.前端所需储备知识
未标注的则为现有项目所用到的技术栈
开发框架
Vue3.x Vue2.x （以V3为主）
React16 React17 （暂时先了解，后续可能会用）
工程化
Webpack4+ Webpack5+
Vite2.x
Ui框架
ElementUi 和 ElementPlus2.x (饿了么团队)
AntDesign (阿里)
图表
Echarts5 (百度)
阿里G系列 F系列
Css语法糖
sass
less
开发规范
Eslint
Prettier
包管理工具
npm
yarn
前端微服务框架
qiankun(阿里)
MircoApp(京东) (还在内测中，先简单了解一下)
跨端开发
Uniapp
Flutter3.x （可作为兴趣学习，待对多端支持更完美后则启用）
Node (学习了解)
express
koa2
文档中心
vuePress
四.家族式设计语言概念(未落地)
概念:
- 品牌定位是基础与核心,可以帮助公司更好的了解市场与了解自己,加深用户对品牌的认知与认同感
- 具体品牌按类型区分,强调专业性的产品要相对保守,纯互联网产品(单品)则突出产品特色
举例:
- 腾讯的 Q 语言，设定了三个基本目标：统一体验，基因体现，社交向善
优点:
- UI 视觉一致性
- 设计原则唯一性
- 提高效率
- 多平台统一
- 软件连续性
实行:
- 基于 element 或 antd 组件进行二次封装,如 Button ,表单,字体等统一格调,减少重复性设计
开发框架
Vue3.x Vue2.x
React16 React17
Angular
工程化
Webpack4+
Vite2.x
Ui框架
ElementUi (饿了么团队)
AntDesign (阿里)
图表
Echarts5 (百度)
阿里G系列 F系列
Css语法糖
sass
less
$black:#fff
.test ww{
color: $black
}
开发规范
Eslint
Prettier
包管理工具
npm
yarn
前端微服务框架
singspa
qiankun(阿里)
MircoApp(京东) - 内测中
跨端开发
Uniapp
Flutter
Node
express
koa2
文档中心
vuePress