Package - dingdanlaile

#订单来了主站! 本项目为vue + jquery 多页+单页应用

安装依赖

set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
yarn config set registry https://registry.npm.taobao.org
yarn
node sass需要额外安装，具体安装方式自行百度

启动

npm start
如果要切换开发和测试环境，可在config。js中进行切换

模块

使用es6模块

导出

export foo;
export default bar;

导入

import { foo } from './foo';
import bar from './bar';

ajax

import http from 'http';
http.get(url, data, config, networkId)
    .then(res => {
        // do something 不需判断code是否为1
        /** res结构
        res = {
            data
            code
            msg
        } **/
    })
    .catch(res => {
        // do something 捕获code不为1的情况
    });
http.post(url, data, config, networkId)
    .then(res => {
        // do something
    });
    企业版增加了networkId字段。在订单模块有统一的设置store的networkId方法来供订单模块统一使用，详情请阅读订单模块代码。

config = {
    notify: Boolean // 是否modal.error后端错误信息，默认为true
    loading: true // 是否加载动画，默认true
}

source: common\http.js

注意：

1.为了将this指向当前环境，使用箭头函数。比如在props里或者settimeout等

2.错误信息处理使用catch,不是必须，因为有默认catch处理。

3.数组作为参数时，需要先将数组序列化(JSON.stringify)，对象同理。

modal

modal.alert(msg); // 不建议用，基本弃用
modal.warn(msg); // 业务中使用，举例：请填写姓名
modal.success(msg); // 业务中使用，处理成功反馈，举例：删除成功，添加成功
modal.error(msg); // 业务中不使用，专门处理后端错误信息
modal.confirm(dialogConfig, confirmCallback, cancelCallback);确认窗口
// 默认值
dialogConfig = {
    title: '提醒',
    message: '您确定要这么做吗',
    okText: '确认',
    cancelText: '取消',
    showTitle: true,
    hasOk: true,
    hasCancel: true
}

soucre: common\modal.js

init

init(option);
defaultOption = {
    header: true, // 顶部导航栏
    leftMenu: true, // 网络设置左侧菜单
    topMenu: false, // 业务设置顶部菜单
    id: undefined, // 模块id
    noAuthUrl: undefined,
    mainContainer: true,
    centerModals: true,
    clearModal: false
};

auth

现在分两套权限系统。一套酒店的权限系统，主要方式在页面进入是校验权限，主要方式为checkModule来校验权限和过期情况，没有权限的时候需要手动路由跳转，可参考customer模块，权限数据存储在localstorage的authList里面另一套为集团模块，存储位置在localstorage的permissionList，方式为页面上不显示具体的模块，所以这会影响到head的导航栏目，比如设置页面的得跳转到第一个具有权限的页面，而不是固定页面，校验方法为auth.js的checkModuleGroup方法，自动选择第一个有权限的页面的具体方法可以参考/common/header/index.js里面的代码 soucre: common\auth.js

首页的静态页面

源文件目录在/static/tpl下。一个页面由gulp-file-include引入不同的模板，再加上页面的内容，最终拼凑成一个页面。

开发新的页面需要先在/static/tpl下创建一个*.html, 然后在/config.js配置文件中的html里添加新页面的路径/static/tpl/.html。然后将需要引入的模板引入，具体可参考feature.html，再编写新页面的代码。最后在homeHead.html中加入对应的链接（/view/home/.html）。

图片请先用https://tinypng.com/压缩

css

尽量使用flex，不用float 尽量不使用style，在vue文件里区分出来全局样式和局部央视，加了scope的为局部样式，但是没加的不等于全局样式，所以不加scoped的主要为修改或者覆盖别的样式，全局样式还是需要写到sass/common模块下

代码风格

js

变量名驼峰，清晰有意义。不行可百度翻译，做到见名知意。尽量提取出公共方法。

句尾;

一段if后空1行。

使用单引号。

缩进：4个空格。

注释清晰有意义，尽可能给大部分if判断写注释。具体参考airbnb的代码规范

css

类名使用BEM命名方式。 .room-header .room-header-tab，拒绝直接命名.table-head这种命名方式

id名驼峰在以后表单组件的name和id取名时也要保持BEM的命名原则，否则自动填充或者自动激活等现在chrome特性会混乱

git commit提交

http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html 只有feat,fix,pref才会生成changelog,所以再选择commit类型和内容的时候需要规范操作,否则会在changelog里面显示出来，对于关键代码一定要用feat来提交，并注明改动和版本，

orderSystem

import { install, OrderSystem } '../common/orderSystem';
install(store);

// .vue
<template>
<OrderSystem />
</template>

// 事件
bus.$on('refreshView')
bus.$off('refreshView')
bus.$emit('refreshView')

主要为订单模块，包括收银等组件。

关于插件引入

不要随意引入组件、插件等，从element-UI或者package中查找满足需求的插件，避免引入重复功能的插件，造成代码冗余
如果确实需要引用插件，需要做一个评估（开源插件的issue以及更新情况）。
引用方法，尽量用npm安装，插件使用-S命令，编译时的依赖使用-D命令，且用以方式引入，插件首字母大写。

import Plugin from 'plugin';

如果需要外部引入，将文件保存在static下，在index.html引入。

<script src="static/plugin.js"></script>

语法规范

使用es6/7语法及方法，注意浏览器兼容以及babel配置。
导入、导出

export foo;
export default bar;

import { foo } from './foo';
import bar from './bar';

尽量使用解构语法

const obj = {
    childA: 0,
    childB: 1
};

const { childA, childB } = obj;

命名使用小驼峰，组件命名使用大驼峰，组件引入使用大驼峰
资源应用，使用绝对路径，使用@，@ = src，如下

import Plugin from '@/compoents/plugin';

缩进问题
if 后面必须使用大括号
方法请写注释
css命名 BEM命名块-元素_功能，块-元素_功能--状态，使用flex布局，不要使用浮动

.header {

    .header-menu {

        .header-menu_item{

            &.header-menu_item--info {

            }

            &.header-menu_item--success {

            }

            &.header-menu_item--waring {

            }
        }
    }
}
避免偷懒使用&-menu_item这种操作，因为这样会全局搜索不到css样式名。

使用eslint强制规范

关于报表部分代码，需要在路由的meta里加入name和id分别保存报表的名字和reportType 报表公共组件的样式在collectList中配置

   
#todoList
##表单组件
    * input（完成）
    * radios（完成）
    * switch（完成）
    * select（完成）
    * counter（需要合并）
    * file（完成）
        * 要求：预览功能，拖拽上传功能（选做）校验功能（格式和后缀）上传功能回调事件,是否多页上传
    * textarea （完成）
        * 要求： 字数统计，最大字数，高度
    * 富文本组件（完成）
        * [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)，做一个封装，带图片编辑和拖拽上传

##样式组件
    * table
        * 报表模式（宽度根据字段自动设置）
        * 表头固定，表单滚动（列表状态）
        * 点击排序
        * 整条点击事件
        * 多层嵌套功能（需要考虑是否在同一个组件中）

##交互组件
    * 右键（已完成）
    * 地区选择器（需review）
    * 日历组件（pc， 移动端）
    * tree（element改造）
    * modal（完成优化中）
    * pagination（已完成）
    * spain（已完成）
    * 轮播（pc和移动端）
    * Tooltip（工具提示）
    * 左右联动菜单组件（需要抽象出来）（餐饮和商超菜单）
    * tab（标签页）（会员设置）
    * 下拉加载更多

##Animation
    * slide in out （下拉菜单等）
    * faden in out （tab切换等）

##style
组建一套自用样式库，demo（bootstrap）以原有的dd-common-css为基础，用sass书写，覆盖基本场景，bem命名规范（长期）
    * 按钮
    * 表格
    * 表单
    * content
##文档和代码整理

##ssr，pwa等新功能研究
    先写一个小程序（完成）

Current Tags

2.35.0 ... latest (3 years ago)

1 Versions

2.35.0 ... 3 years ago