# vue-demo

**Repository Path**: seaco/vue-demo

## Basic Information

- **Project Name**: vue-demo
- **Description**: ...........
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-21
- **Last Updated**: 2022-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# seacofrontenddemo

#### 项目目录

```
├─ build #包含用于build的webpack脚本文件
├─ config #构建配置目录
├─ node_modules #依赖的node工具包目录
├─ src #主体业务
    ├─ components #组件目录
        ├─ common #通用组件文件夹
        ├─ ... #按照业务细分文件夹
    ├─ filters #全局过滤器文件夹
        ├─ index.js #过滤器注册表
        ├─ ... #过滤器代码
    ├─ functions #全局函数文件夹
        ├─ index.js #全局函数注册表
        ├─ ... #全局函数代码
    ├─ icons
    ├─ modules #业务界面文件夹
        ├─ common #与业务无关的通用界面，如404界面等
        ├─ ... #按业务细分界面文件夹
    ├─ router #路由配置
        ├─ index.js #路由注册表
        ├─ ... #按业务细分各路由
    ├─ store #全局变量配置文件夹
        ├─ index.js #全局变量注册表
        ├─ ... #按作用细分各全局变量
    ├─ style #样式表文件夹
        ├─ index.scss #样式注册表
        ├─ common #全局样式文件夹
        ├─ ... #可按业务新增样式表（不推荐，推荐各业务界面样式配置于对应modules或components的业务文件夹下）
    ├─ utils #工具类文件夹
        ├─ ...工具类代码
    ├─ App.vue #页面级Vue组件
    ├─ main.js #页面级入口js文件
├─ static #静态文件目录
├─ test #测试文件目录
├─ .eslintrc.js #ES语法检查配置
├─ index.html #入口页面
├─ package.json #项目描述文件

```
---


#### 开发规范

1. 自定义事件名采用中划线形式（动词-名称），例如`click-item`，`change-page`
2. 筛选项统一使用`el-form`方式，绑定对象统一命名为`filter`，例如
```html
<el-form
    class="list-filter"   // 可以自定义样式
    @submit.native.prevent
    :inline="true">
        <el-form-item label="姓名">
            <el-input
                v-model.trim="filter.query"     // 这里将值绑定到『filter』里
                @keyup.enter.native="refresh"
                :maxlength="20"
                style="width: 320px"
                placeholder="请输入客户姓名/电话精准搜索">
                <i slot="suffix"
                    @click="refresh"
                    class="el-input__icon el-icon-search pointer">
                </i>
            </el-input>
        </el-form-item>
        <el-form-item label="类型">
            <el-select v-model="filter.query"></el-select>
        </el-form-item>
    </el-row>
</el-form>
...
...
data(){
    return {
        filter: {
            query: ''
        },
    }
}
```
3. 页面列表数据请求统一方法名为`fetchList`
4. 样式中颜色、大小等尽量使用`variables`中的变量
5. 远程仓库中`master`分支为主分支，之后将作为线上分支，`test`为测试服分支（联调时创建），现在开发阶段首先创建自己的分支进行开发，例如`zhw-dev`，`master`不允许直接上传，每天下班前将自己的代码提交`MergeRequest`到`master`分支
6. 按照现有的`eslint`规则进行开发，原则上不允许自己更改规则，如需更改需全体讨论后决定
7. 定义变量、函数、样式名等时尽量命名为有意义的名称，避免魔鬼数字，例如不要命名为`a1,person1,person2,class1`等
8. 变量及函数名采用小驼峰方式，样式名采用中划线方式，模块中的vue组件命名采用大驼峰方式，其他文件采用小驼峰方式
9. 路由名保持和模块名一致
10. 请求示例
```javascript
let data = {
'countryCode': '+86',
'mobile': '18752860730'
}
this.$http.post('/youzan/ewalletYzUserBasicGet', data, (res) => {
...
}, (res) => {
...
})
```