首页 > 其他分享 >测试捏~

测试捏~

时间:2023-05-18 10:57:55浏览次数:50  
标签:vue 坚持 js README 测试 组件 config

estate-ui

依赖环境
node <= v14.18.1

目录

Vue 集成开发环境。

参考资料:

简介

基于 [email protected],增加如下基本功能(后面是对应的说明文档或配置文件):

目录结构说明

estate-ui
  - src - 主业务代码目录
    - api - 数据的请求方法
    - assets - 共用的静态资源
    - components - 共用的组件
    - layout - 主页的布局容器
    - mock - 模拟接口数据
    - plugins - 使用的插件
    - router - 路由配置
    - store - 全局的状态管理
    - styles - 全局的样式配置
    - utils - 工具函数存放目录
    - views - 主业务的页面路径
    - tests - 测试类目录
    - main.js - 入口文件

  - .env - 环境变量配置文件
  - .eslintrc.js - eslint 配置文件
  - .svnignore - svn 忽略文件
  - .babel.config.js - babel 编译配置文件
  - jest.config.js - jest 测试配置文件
  - perttier.config.js - perttier 配置文件
  - proxy.config.js - 开发服务器代理配置
  - vue.config.js - vue-cli 的配置文件

注意事项

  • element-ui 使用来按需加载,使用未注册的组件时,先到 src/plugins/element.js 文件中注册组件。

开发流程与规范

流程

  1. 根据原型图/设计图进行路由设计(不写代码,只是画出路由的草稿图)
  2. 根据原型图/设计图将页面进行组件的划分(简单的列出各组件之前的关系草稿图)
  3. 写路由配置与基础的入口组件(此时不带任何的业务)
  4. 依次按照“父组件,子组件”顺序编写基础的页面布局(先不写交互逻辑)
  5. 布局完成后,开始设计/思考组件数据存储/交互方式,如:data props store
  6. 开始编写组件的交互逻辑(注意保持单一职责原则,考虑如何让组件间的关系解耦)
  7. 涉及到接口交互时,编写 mock 数据进行模拟交互
  8. 然后优化交互体验,增加一些过渡效果
  9. 最后进行与后端的接口联调,数据结构的调整等

规范

为了保护项目的可维护性,可扩展性以及高效的编码,编写方式务必保持一致。

以下规则不包含所有的规则,例如一些默认规则。

单一职责

对所有的组件,指令,过滤器,接口请求方法等应用单一职责原则(SRP)

  • 坚持每个组件或者模块只做一件事。
  • 坚持把文件大小限制在 400 行以内。
  • 坚持定义小函数,考虑在 75 行以内。

文件命名

保持不同类型的文件命名风格一致。

  • 组件名使用多个单词,例如组件名带上该模块的前缀。
  • 在描述性名字中,用横杠来分割单词。
  • 尽量使用功能的特性去命名。

代码编写

JS
  • 坚持使用大写驼峰来命名类。
  • 坚持使用 const 声明变量。
  • 坚持使用小写驼峰来命名属性与方法。
  • 坚持将自定义的模块导入与第三方的模块导入中间空一行。
  • 坚持在非头部的注释上面增加一行空行。
CSS
  • 坚持使用类名去命名样式。
  • 坚持使用公共的样式类,避免重复的样式属性。
  • 坚持在每个组件使用一个容器类包含所有的子类。
  • 坚持在父子组件之间不发生样式类名的重复。

建议 BEM 命名规范:理论上讲,每行 css 代码都只有一个选择器。

HTML
  • 坚持考虑尽可能的扁平化布局。
  • 坚持使用语义化的标签,而不是为了该标签的样式。
  • 坚持将带计算逻辑的模版变量转换为 computed 或者 通用的 filters
  • 避免使用内联样式。
Vue 单文件
  • 坚持以 template, script, style 顺序写组件。
  • 坚持组件的 data 为函数,非对象。
  • 坚持为 prop 的属性定义 required, validator, 类型等详细信息。
  • 坚持为 v-for 设置 key
  • 避免将 v-ifv-for 用在一起。
  • 坚持为组件的私有属性使用 $_ 前缀。
  • 坚持为组件的样式设置作用域。

代码提交

  • 坚持在提交代码前校验代码,解决每一个警告。
  • 坚持一次 commit 只进行一个功能的更改。
  • 坚持使用 type(subtype): description 形式提交 commit,type 如下:
    • feat 新增的功能
    • chore 构建过程或辅助工具的变动
    • refactor 重构(即不是新增功能,也不是修改 bug 的代码变动)
    • style 修改格式,不影响逻辑
    • fix 修复问题
    • revert 回滚
    • docs 编写文档
    • test 测试类

开始

  • npm start 开启开发服务器
  • npm run build 进行打包
  • npm run build-analyzer 进行打包与体积分析
  • npm run lint 运行代码校验
  • npm run test 运行单元测试

开始开发

1.关于代理的相关配置

  • 不能随意修改,有项目负责人修改
  • 避免直接使用api本省的字符作为代理标识

2.关于config配置api请求路径

  • 按目录结构编写config url配置文件
// 例子:
// createProcess就是views中的组件名称,
// 该组件对应的url都会配置到createProcess中,方便项目阅读
createProcess: {
    land: {
      query: GLOBAL.PROXY + '/registerDraftController/getLandPageList'
    },
    house: {
      query: GLOBAL.PROXY + '/registerDraftController/getHouseLandPageList'
    },
    record: {
      query: GLOBAL.PROXY + '/supplementTaskController/getBlPendingPageList'
    }
},

3.关于api文件的编写

  • config的引入
  • 必须调用request
import request from '../../utils/request';
import config from '../../config/index';

const DraftApi = {
  queryTD(param) {
    return request({
      url: config.URL_DEFAULT.createProcess.land.query,
      method: 'get',
      params: param
    });
  },
  queryFC(param) {
    return request({
      url: config.URL_DEFAULT.createProcess.house.query,
      method: 'get',
      params: param
    });
  }
};

export default DraftApi;

4.关于语法检查

  • 必须遵循语法检查,使用Webstrom、VsCode的可以配置,大多数编辑工具都可以配置,eslint配置,推荐webstrom
  • 配置fix eslint problems, 百度即可

5.components中组件的介绍

5.1.e-table组件

  • 基本功能

e-table自带分页器,基本可以满足estate-ui所的表格需求。

参数:

参数 类型 描述
tableList Array 表格数据
columns Array 列数据
operates Object 操作区按钮数据
options Object 表格全局配置

方法:

方法名 参数 描述
setTableList data 设置表格数据
setTotal total 设置数据总数
setPageSize size 设置每一页的显示条数

更多详细请参考/estate-ui/src/views/personal-office/draft 下的组件
示例代码:

<ETable
  ref="draftFcTableRef"
  :tableList="tableList"
  :options="options"
  :columns="columns"
  :operates="operates"
  @afterCurrentPageClick="afterCurrentPageClickHandle"
/>

import ETable from '@/components/e-table/index';
export default {
    data() {
        return  {
            tableList: [],
            options: {
                // 每页数据数
                pageSize: 10,
                // 当前页码
                currentPage: 1,
                loading: true,
                mutiSelect: true,
                hasIndex: true
            },
            columns: [
                {
                  prop: 'bdcdyh',
                  label: '不动产单元号',
                  align: 'center',
                  width: '220'
                },
                {
                  prop: 'zl',
                  label: '坐落',
                  align: 'center'
                }
            ],
            operates: {
                width: 200,
                fixed: 'right',
                list: [
                  {
                    id: '1',
                    label: '详情',
                    show: true,
                    underline: false,
                    icon: '&#xe608;',
                    disabled: false,
                    method: (key, row) => {
                      console.log('row', row);
                    },
                    showCallback: () => {
                      return true;
                    }
                  }
                ]
            }
        };
    },
    methods: {
        query() {
            // 1.请求数据
            // 2.在返回结果中,调用上文中列出的三个方法
        }
    }
    mounted() {
        // 关于e-table组件这里需要注意,初
        // 始化数据一定是在mounted中初始化,而不是created
        this.query();
    }
}

6.关于views页面的编写

6.1.关于新增页面注意项

规范

  • 新增文件。
    1. views下,所有的目录对应的是一节菜单,小写短横线连接,建议要英文表述清楚菜单名的意义。
    1. 具名在文件夹,而不是.vue文件上
比如:
应该是:
-- home
-- -- index.vue
而不是
-- home.vue

好处在于home下可以为组件扩展更多类型的文件,index.option.js等等,
扩展后后依然位于一个home文件夹中,便于管理

  • 修改/estate-ui/src/router下index.js文件
    1. 懒加载
    1. path要唯一,且同名于views下的对应的组件
    1. 路由配置后,路由数据也是菜单的数据,修改后会自动同步到菜单处

标签:vue,坚持,js,README,测试,组件,config
From: https://www.cnblogs.com/yehuda/p/17411230.html

相关文章