vxiao

悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非。

0%

前端规范

发表于 更新于 分类于
Vue项目代码书写的标准与建议

开发环境

PC端

Vue + Webpack + Axios + ElementUI

移动端

Vue + Webpack + Axios + Vant

IDE与代码格式化

VsCode + Vetur + Eslint-standard

其他

脚手架: Vue Cli2 、 Vue Cli3 、Vue Cli4

CSS预处理: Sass、Scss / PostCss

图表： Echarts

内部组件库

主题： http://geek.glodon.com/scm/glk/gtptheme.git

LO公共组件： http://geek.glodon.com/scm/glk/gtpvue.git

开发规范

一、目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
├── node_modules  // 项目依赖包文件夹
├── build   // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  // 项目基本设置文件夹
│   ├── dev.env.js  // 开发配置文件
│   ├── index.js  // 配置主文件
│   └── prod.env.js  // 编译配置文件
├── index.html   // 项目入口文件
├── package-lock.json  // npm5 新增文件，优化性能
├── package.json  // 项目依赖包配置文件
├── src    // 我们的项目的源码编写文件
│   ├── App.vue  // APP入口文件
│   ├── assets  // 初始项目资源目录，回头删掉
│   │   └── style // 全局样式
│   │       └── index.scss
│   │   └── utils  //公用事件
│   │       └── index.js
│   ├── components // 组件目录
│   │   └──Tip 
│   │       └──index.vue // 公用组件
│   │   └──Message.vue   // 公用组件 
|   |
│   ├── views
│   │   ├─ fawen
│   │   │    ├── components
│   │   │    │   ├── Sidebar
│   │   │    │   │   ├─ index.vue
│   │   │    │   │   ├─ Item.vue
│   │   │    │   │   └─ SidebarItem.vue
│   │   │    │   ├─ AppMain.vue
│   │   │    │   ├─ index.js
│   │   │    │   └─ Navbar.vue
│   │   │    └─ index.vue
│   │   └─ shouwen
│   ├── main.js // 主配置文件
│   └── service // 请求文件夹
│   │    └── Home.api.js   // 请求文件
│   └── router // 路由配置文件夹
│       └── index.js   // 路由配置文件
└── static // 资源放置目录

二、文件名要求

  • 组件文件夹默认导出index.vue或index.js
  • 请求文件放在service文件夹下，以(PascalCase)命名规范

组件导出

1.组件文件夹默认导出index.vue或index.js

1
2
3
4
Breadcrumb
   │──components
   │   └──Box.vue
   └──index.vue

非组件文件夹

1
Message.vue

2.全局通用的组件放在 /src/components下，示例：

1
2
3
4
5
components // 组件目录
  ├─ Breadcrumb。 
  │   └──index.vue
  └─ SvgIcon 
      └──index.vue

3.页面组件放在views下,页面中的业务组件放在components下

1
2
3
4
5
6
7
8
9
views
  └─fawen
     │─ components
     │   ├─Sidebar
     │   │  └─ index.vue
     │   ├─ AppMain.vue
     │   ├─ Navbar.vue`
     │   └─ index.js
     └─ index.vue

页面过长时以kebab-case命名，如menhu-guanli

说明：

文件夹命名：camelCase VS kebab-case

展开node_modules 中的项目依赖，会发现，几乎所有的项目文件夹命名都是kebab-case命名的，使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰

组件命名：kebab-case VS PascalCase

vue的官方的风格指南中关于组件文件名的推荐：单文件组件文件的大小写强烈推荐
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

组件导入

1
2
3
4
5
import PtlHeader from './components/Header'

<ptl-header></ptl-header>

<PtlHeader></PtlHeader>

请求文件

请求的方法用大写 与 js方法区分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Org.api.js

/**
 * @description 根据组织Id查询下级组织信息
 * @param {String} Id  例："1.D/1001.D/1010.D"
 * @param {String} Kind 例：D
 */
let GetChildren = (Id, Kind) => {
  return window.$LO.http.post(`/Workflow/v2/Org/GeChildren`, { Id, Kind })
}
/**
 * @description 组织搜索/人员搜索
 * @param {String} Filter 搜索关键词
 * @param {Array} Kinds 搜索组织类型
 * @param {Array} Ranges 组织 fullId 集合
 */
let Find = (Filter, Kinds, Ranges) => {
  return window.$LO.http.post(`/Workflow/v2/Org/Find`, { Filter, Kinds, Ranges })
}

export {
  GetChildren,
  Find
}

全局变量

配置项

1
window.BASE_PATH='portal'

插件式调用，参考$G.DataContext.getDataSource()

1
this.$LO.Workflow.send()

Css

kebab-case

1
2
3
.ptl-header{
     width: 100%;
}

三、 JS内容要求

  1. 子组件引入方式：
  • 公共组件经常使用如： header,footer等会一起打包到公共js文件。
1
2
3
4
5
6
import {XyHeader,XySide} from '@/components';

components: {
  XyHeader,
  XySide
}
  • 单独组件，不是经常使用的，会单独打包出来，需要引入自己加载出来。
    1
    'XyDrowDown': () => import('component/DrowDown.vue')
  1. .vue顺序 主要：mounted、created放在methods前
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
import WorkFlowMap from '../components/WorkFlowMap' // 流程图

export default {
  name: 'Index',
  components: {
    WorkFlowMap
  },
  data () {
    return {
      text: ''
    }
  },
  mounted () {
    // 默认意见按钮是否显示
    this.loadList()
  },
  methods: {
    loadList () {
    }
  }
  watch: {                                                // 监听
    gongWenInfoId (newId) {
      this.loadList(newId)
    }
  }
}
</script>

四、 注释

vue文件说明

1
2
3
4
5
6
7
<!--
 * @FileDescription: 该文件的描述信息
 * @Author: 作者信息
 * @Date: 文件创建时间
 * @LastEditors: 最后更新作者
 * @LastEditTime: 最后更新时间
 -->

methods方法

1
2
3
4
5
6
/**
* @description 方法描述
* @param {参数类型} 参数名称
* @param {参数类型} 参数名称
* @return 没有返回信息写 void / 有返回信息 {返回类型} 描述信息
*/

无参数方法

1
// 方法描述

五、其他

为项目增加版本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=11,IE=10">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>版本声明</title>
</head>

<body>
<p>commit: <%= htmlWebpackPlugin.options.buildInfo.commit %></p>
<p>commitUserName: <%= htmlWebpackPlugin.options.buildInfo.commitUserName %></p>
<p>commitDate: <%= htmlWebpackPlugin.options.buildInfo.commitDate %></p>
<p>buildUserName: <%= htmlWebpackPlugin.options.buildInfo.buildUserName %></p>
<p>buildUserMail: <%= htmlWebpackPlugin.options.buildInfo.buildUserMail %></p>
<p>buildDate: <%= htmlWebpackPlugin.options.buildInfo.buildDate %></p>
</body>

</html>