正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史记录

版本 1 当前 »

  1. 目录命名

    • 能直观的感受当前目录文件的作用
    • 以小驼峰方式命名
    • 特殊缩写名称可大写开头
    • - 根目录
    - schoolHandle //学校管理
    - environmentDetail //环境详情

  2. 页面命名

    • 能直观的感受当前文件的作用
    • 以小驼峰方式命名
    • 有多页面功能重复时可忽略父文件夹名称
    • 一个目录下页面过多时可使用二级目录分类但不得超过二级
    • - 根目录
    - powerlHandle //电源管理
		- roomList.vue //电源管理实训室列表
		- plateformList.vue //电源管理实训台列表
    - environmentHandle //环境管理
		- roomList.vue //环境管理实训室列表
		- plateformList.vue //环境管理实训台列表
    - consumableHandle //耗材管理
		-basic //耗材管理基础页面
			-goodsHandle.vue //耗材管理产品管理
			-warehouseHandle.vue //耗材管理仓库管理
		-form//耗材管理表单页面
			-apllyGet.vue //耗材管理申购表单
			-inStorage.vue //耗材管理入库表单
    • 单独一页的功能为一个目录和index.vue组成
    • - 根目录
    - powerlHandle //电源管理
		- index.vue

  3. 组件命名

    • 能直观的感受当前组件的用途
    • 组件命名始终是多个单词的，避免跟html元素或标签冲突
    • 要么大写开头，要么始终用横线链接
    • - BaseButton.vue
- BaseTable.vue
- BaseIcon.vue

  4. 图片命名

    • 图片文件夹一般遵从页面或者模块命名,如：login/）

    • 图片不可随意命名，且严禁使用0，1，等数字直接命名图片。

    • 图片命名可遵循：用途+描述，多个单词用下划线隔开，如：login_icon.png,pwd_icon.png

    • 10k以下图片建议放置assets/img下（webpack打包时直接转为base64嵌入）

    • 大图且不常更换的图片放置public/img下

    • 可用css编写的样式严禁使用图片

    • 国际化图片，后缀使用简体-cn,英文-en,繁体-tw

  5. 路由命名

    • 普通路由(非动态多级)命名，可以直接使用页面组件的命名。

  6. id class命名

    • 首先根据内容命名，如：nav,header
    • 内容中的子元素使用-链接，名称一律小写，如：card-item
    • 修饰类（易变的）使用--链接，如：card-item--warning
    • 若无内容，结合行为进行辅助，如：box-shawder

    • 若为布局元素,结合内容与位置命名，如：news-left

    • 不影响语义的情况下，可缩写，如：img-box,btn,

  7. 变量命名

    • 变量命名：小驼峰命名

    • 参数名：小驼峰命名

    • 函数名：小驼峰命名

    • 方法/属性名：小驼峰命名

    • 类名开头大写

    • 私有属性、变量和方法以下划线 _ 开头。

    • 常量名：全部使用大写+下划线

    • let loadingModules = {};

const HTML_ENTITY = {};

function stringFormat(theBells) {}

function insertHTML(element, html) {}

function Engine(options) {}
    • 不使用单字母变量，不使用无意义字符如：aaa，使用缩写时缩写成人看得懂的东西 saveButton = saveBtn  !== sb


  • 无标签