estate-ui

依赖环境
node <= v14.18.1

estate-ui

Vue 集成开发环境。

参考资料：

流行的后台集成框架 PanJiaChen/vue-element-admin

Angular 风格指南 angular/styleguide

Vue 风格指南 vue/styleguide

React 理念 react/thinking-in-react

简介

基于 [email protected]，增加如下基本功能（后面是对应的说明文档或配置文件）：

UI 框架 element-ui - README
路由管理 vue-router - README
路由管理 vue-router - README
HTTP 请求 axios - README
模拟数据 mockjs - README
强制代码校验 eslint + prettier - README
SVG 图标库 vue-awesome - README
全局样式 - README
测试 - README

目录结构说明

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 文件中注册组件。

开发流程与规范

流程

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

规范

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

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

单一职责

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

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

文件命名

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

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

代码编写

JS

坚持使用大写驼峰来命名类。
坚持使用 const 声明变量。
坚持使用小写驼峰来命名属性与方法。
坚持将自定义的模块导入与第三方的模块导入中间空一行。
坚持在非头部的注释上面增加一行空行。

CSS

坚持使用类名去命名样式。
坚持使用公共的样式类，避免重复的样式属性。
坚持在每个组件使用一个容器类包含所有的子类。
坚持在父子组件之间不发生样式类名的重复。

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

HTML

坚持考虑尽可能的扁平化布局。
坚持使用语义化的标签，而不是为了该标签的样式。
坚持将带计算逻辑的模版变量转换为 computed 或者通用的 filters。
避免使用内联样式。

Vue 单文件

坚持以 template, script, style 顺序写组件。
坚持组件的 data 为函数，非对象。
坚持为 prop 的属性定义 required, validator, 类型等详细信息。
坚持为 v-for 设置 key。
避免将 v-if 与 v-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

测试捏～