vue技术规范

前端规范篇

---

目录结构

• mock：用于模拟假数据，当和后端定好数据结构后，可先用此方式模拟数据返回
• api：与后端交互api接口都放置此处，按模块划分、避免在业务层代码中出现直接请求api的情况！！
• assets：此文件夹放置图片资源
• common：此文件夹内容全局导入，无函数导入内容
• components：此文件夹放置公共组价，2处以上重复使用的考虑抽出组件公用
• icons：放置svg图标，使用<svg-icon icon-class="404" />，使用 css clolor 属性可修改颜色
• mixins：混入，组件复用代码
• router：路由组件
• store：vuex文件，store 不可直接或间接引入第三方库文件
• styles：公共样式文件
  • var.scss：已全局引入，其他地方直接使用即可
  • layout.scss：布局样式
  • .common.scss：基础样式，参考 tailwindcss

• utils：工具库
• view：路由视图
  • [模块名]
    • index.vue 门户视图文件
    • 模块名.vue 主视图路由文件
    • [components] 业务组件
    • [common] 模块内公用文件、模块业务相关
    • [mixins] 模块内组件重用文件、业务相关

Codeing

   代码风格规则遵循 .prettierrc.js、.eslintrc.js

• 第三方库导入：禁止导入全部第三方库内容，建议只导入使用到的模块 如： import _ from 'lodash'  改为  import cloneDeep from 'lodash/cloneDeep' 
• 第三方库导入：尽量避免在公共代码文件内导入第三方库
• 异步函数：统一使用  async   await  语法
• 注释：定义的变量及方法尽量用注释表明含义
• 变量名称：变量名称及函数名使用  camelCase  规则
• 默认赋值：组件 data 中将默认空值设置为 undefined 
• 函数：避免函数内处理多条业务逻辑，遵循一个函数一件事的原则
• watch：watch 中避免处理大篇幅的业务逻辑，抽到方法中处理
• 组件使用：自定义组件使用  PascalCase  <XsimFilter />
• 存储：避免直接调用 sessionStorage 等api，可以参考 storage.js
• 事件：注册的时间使用完销毁

  storage.js

interface IStorageOptions {
    prefix?: string
    store: 'sessionStorage' | 'localStorage'Storage
}

const prefix = 'XsimWeb_'

export function StorageHook(key: string, option: IStorageOptions) {
    options = Object.assign(
        {},
        {
            prefix,
            store: 'sessionStorage'
        },
        options || {}
    )
    key = options.prefix + key
    
    const setStorage = (val: any) => {
        window[options.store].setItem(key, JSON.stringfy(val))
    }

    const getStorage = (defaultValue?: any) => {
        const data = window[options.store].getItem(key)
        try {
            return data ? JSON.parse(data) : defaultValue
        } catch (error) {
            return defaultValue
        }
    }
    const removeStorage = () => {
        window[options.store].removeItem(key)
    }
    return [setStorage, getStorage, removeStorage]
}

export function SessionHook(key: string) {
    return StorageHook(key, { store: 'sessionStorage' })
}

export function LocalHook(key: string) {
    return StorageHook(key, { store: 'localStorage' })
}

export function ClearStorage() {
    const remove = (target: Storage) => {
        Object.keys(target).forEach((v) => {
            if (v.includes(prefix)) {
                target.removeItem(v)
            }
        })
    }
    remove(localStorage)
    remove(sessionStorage)
}

style

   代码风格规则遵循 .prettierrc.js、.stylelintrc.js

• 避免多层嵌套
• 避免使用元素选择器
• 尽量避免行内样式
• 组件样式尽量使用 BEM 命名规则 [模块名]__[元素名]--[修饰符]

.block {
}
.block__element {
}
.block--modifier {
}
.block__element--modifier {
}

例如： .el-table .el-table--border .el-table__header-wrapper 

Git

   Git commit 规则遵循 .cz-config.js

• master分支，不在此分支上做开发
• v2 作为 develop 分支，一切新功能开发的基础分支，每次开发新功能以此分支为基础创建新分支
• 版本开发分支以  feature/模块名  命名规则 - 开发结束后会被删除
• 新版本分支以  release/版本名  命名规则
• 修复分支以  hotfix/模块名  命名规则 - 从  release/版本名  分支创建 - 修复上线后会被删除
• 提交命令  1. npm run commit  2. git push 

File & Folder

   文件命名规则遵循 .ls-lint.yml

• 文件命名尽量避免中文
• 文件命名格式：
  • PascalCase 大驼峰 components/XsimDialog
  • camelCase 小驼峰 view/modelAssenmbly
  • kebab-case 短横线 mock/mock-xhr.js
• 路由名称和 view 文件名称保持一致 /#/xscenario -> view/xscenario/xscenario.vue