school-of-website-engineering / future-front-end

future项目的前端代码，Vue3 + TypeScript + Vite + Element Plus + SCSS + Pinia，一个在线聊天室项目。

future-front-end

---

---

项目简介

future-front-end 是一个基于 Vue3 + Vite + TypeScript 的前端类似 discord 交友聊天项目，使用了 Vue Router、Vuex、Element Plus 等主流框架和库，项目采用了模块化、组件化、工程化的开发模式。

内容列表

• future-front-end
  • 项目简介
  • 项目现阶段预览
  • 相关仓库
  • 维护者
  • 如何贡献
    • 贡献者
  • 快速上手
    • 特别感谢：
  • 使用许可

---

项目现阶段预览

相关仓库

• Rosy-DR-Code-Ling — 💌 Rosy-DR-Code-Ling 的 Web 页面

维护者

@mason369

如何贡献

非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。

Progressive-Tune 遵循 Contributor Covenant 行为规范。

贡献者

Null

Mason

JDSA Ling

Liuliu66

感谢以上参与项目的人

---

快速上手

环境尽量请按开头的环境标签配置好，否则可能会出现各种问题。

安装依赖：

npm install

启动：

npm run dev

部署：

npm run build

执行命令后会得到 dist 目录，可以放到自己的 web 服务器指定的路径下，然后访问即可。

或者运行:

npm run preview

进行生产预览

---

注意事项：

如果出现"cygpath: command not found" when commiting to branch错误，请添加你的 Path 环境变量:C:\Program Files\Git\usr\bin，更多信息请参考"cygpath: command not found" when commiting to branch #10326

---

特别感谢：

IntelliJ WebStorm 是一款在各方面最大限度地提高开发人员生产力的 IDE，适用于前端平台语言。

Node.js 对一些特殊用例进行优化，提供替代的 API，使得 V8 在非浏览器环境下运行得更好，V8 引擎执行 Javascript 的速度非常快，性能非常好，基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

Visual Studio Code在 Windows、macOS 和 Linux 上运行的独立源代码编辑器。 JavaScript 和 Web 开发人员的最佳选择，具有几乎可支持任何编程语言的扩展。

Vue.js前端先进的渐进式 JavaScript 框架,易学易用，性能出色，适用场景丰富的 Web 前端框架。

使用许可

Apache License 2.0 © Richard Littauer

future-front-end's Issues

前端 CSS 规范

前端 CSS 规范

分号

每个属性声明后面都要加分号。

命名

1. 不使用 id 选择器
2. 适用有意义的名词命名
3. 单词全部小写，名词超过 1 个时，使用-分隔符

属性声明顺序

原则：整体到局部，外部到内部，重要属性优先

.element {
	display: block;
	float: left;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	margin: 0 100px;
	padding: 50px; // padding习惯写到margin后面
	width: 100px;
	height: 100px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	font: normal 13px "Helvetica Neue", sans-serif;
	color: #333;
	text-align: center;
	line-height: 1.5;
	background-color: #f5f5f5;
	opacity: 1;
}

其他规范

使用 prettier 格式化工具约束，推荐配置如下：

• 格式自动化
• 4 个缩进
• 全部单引号
• 属性:后有空格
• 颜色全部小写
• 小数点前面 0 自动添加

module.exports = {
    printWidth: 100, // 设置prettier单行输出（不折行）的（最大）长度

    tabWidth: 4, // 设置工具每一个水平缩进的空格数

    useTabs: false, // 使用tab（制表位）缩进而非空格

    semi: false, // 在语句末尾添加分号

    singleQuote: true, // 使用单引号而非双引号

    trailingComma: 'none', // 在任何可能的多行中输入尾逗号

    bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格

    arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号

    // parser: 'babylon', // 指定使用哪一种解析器

    jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）

    rangeStart: 0, // 只格式化某个文件的一部分

    rangeEnd: Infinity, // 只格式化某个文件的一部分

    filepath: 'none', // 指定文件的输入路径，这将被用于解析器参照

    requirePragma: false, // (v1.7.0+) Prettier可以严格按照按照文件顶部的一些特殊的注释格式化代码，这些注释称为“require pragma”(必须杂注)

    insertPragma: false, //  (v1.8.0+) Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了。

    proseWrap: 'preserve' // (v1.8.2+)
}

参考连接

百度 CSS 规范指南(opens new window)

腾讯 CSS 规范指南(opens new window)

Google CSS 规范指南

前端 JS 规范

前端 JS 规范

变量

命名方式：小驼峰

命名规范：前缀名词

// bad
let setCount = 10;

// good
let maxCount = 10;

常量

命名方式：全部大写

命名规范：多个单词时使用分隔符**_**

// bad
const serverErrorCode = {
	success: 200,
	repeat: 444,
};

// good
const SERVER_ERROR_CODE = {
	SUCCESS: 200,
	REPEAT: 444,
};

函数

命名方式：小驼峰

命名规范：前缀动词

// bad
function wordClass() {}

// good
function saveWordClass() {}

常用动词：can、has、is、load、get、set

类

命名方式：大驼峰

命名规范：前缀名词

// bad
class person {}

// good
class Person {}

注释

单行

// 单行注释，注意前面的空格
let maxCount = 123;

多行

/**
 * 多行注释
 * /

减少嵌套

确定条件不允许时，尽早返回。经典使用场景：校验数据

// bad
if (condition1) {
    if (condition2) {
        ...
    }
}

// good
if (!condition1) return
if (!condition2) return
...

减少特定标记值

使用常量进行自解释

// bad
type: 1; // 1代表新增  2代表修改

// good
const MODIFY_TYPE = {
	ADD: 1,
	EDIT: 2,
};

type: MODIFY_TYPE.ADD;

表达式

尽可能简洁表达式

// bad
if (name === "") {
}
if (collection.length > 0) {
}
if (notTrue === false) {
}

// good
if (!name) {
}
if (collection.length) {
}
if (notTrue) {
}

分支较多处理

对于相同变量或表达式的多值条件，用 switch 代替 if。

// bad
let type = typeof variable;
if (type === "object") {
	// ......
} else if (type === "number" || type === "boolean" || type === "string") {
	// ......
}

// good
switch (typeof variable) {
	case "object":
		// ......
		break;
	case "number":
	case "boolean":
	case "string":
		// ......
		break;
}

使用变量名自解释 V1.1

逻辑复杂时，建议使用变量名自解释，而不是晦涩难懂的简写。

// bad
function(value) {
    return !helpers.req(value) || this.entity.entVocabularyEntries.filter(item => item.vocabularyEntryName === value).length < 2
}

// good
function(value) {
    let entVocabularyList = this.entity.entVocabularyEntries
    let repeatCount = entVocabularyList.filter(item => item.vocabularyEntryName === value).length
    return !helpers.req(value) || repeatCount < 2
}

使用函数名自解释 V1.1

遵循单一职责的基础上，可以把逻辑隐藏在函数中，同时使用准确的函数名自解释。

// bad
if (modifyType === MODIFY_TYPE.ADD) {
    batchVariableAPI(data).then(() => {
        this.closeModal()
        this.$toast.show('添加变量成功')
    })
} else {
  updateVariableAPI(data).then(() => {
        this.closeModal()
        this.$toast.show('修改变量成功')
    })
}

// good
modifyType === MODIFY_TYPE.ADD ？ this._insertVariable(data) : this._updateVariable(data)

_insertVariable() {
    batchVariableAPI(data).then(() => this._successOperation('添加变量成功'))
}

_updateVariable() {
    updateVariableAPI(data).then(() => this._successOperation('修改变量成功'))
}

_successOperation(toastMsg) {
    this.closeModal()
    this.$toast.show(toastMsg)
}

其他规范

其他规范

使用 prettier 格式化工具以及 eslint 校验

prettier格式化工具请自行全局安装后格式化

.eslintrc.js 规则：

module.exports = {
	root: true,
	env : {
		browser: true,
		node   : true,
		es2021 : true,
		es6    : true
	},
	extends: ["plugin:vue/essential"],

	plugins: ["@typescript-eslint"],

	parserOptions: { parser: "babel-eslint" },
	plugins      : ["vue"],
	// 在此处添加自定义规则
	rules        : {
		eqeqeq: "off", // 要求使用 `===` 和 `!==`

		curly: "error", // 强制所有控制语句使用一致的括号风格

		quotes: ["error", "double"], // 引号

		"arrow-parens": 0, // allow paren-less arrow functions

		"generator-star-spacing": 0, // allow async-await

		"no-unused-vars": "error", // disabled no ununsed var  `V1.1`

		"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", // no use debugger in production

		indent: [2, 4, { SwitchCase: 1 }], // 4 space for tab for perttier

		"space-before-function-paren": ["error", "never"], // no space in function name for perttier

		// # Possible Errors
		//
		"no-constant-condition": ["warn"],

		// 允许 if(...){带有花括号的空代码}
		"no-empty": ["off"],

		// 数组, 对象 逗号后面强制一空格
		"comma-spacing": ["error", { after: true }],

		// 对象单行 多行对齐模式
		"key-spacing": [
			"error",
			{
				singleLine: {},
				multiLine : { align: "colon" }
			}
		],

		// # Best Practices
		// 对象换行策略 , 如果多行, `{`和`}` 前后不能跟值
		"object-curly-newline" : ["error", { multiline: true }],
		"array-bracket-newline": ["error", { multiline: true }],

		// if后面强制花括号
		curly: ["error", "all"],

		// # Strict Mode
		// # Variables
		"no-unused-vars": ["warn"],

		// # Stylistic Issues

		quotes           : ["error", "double"],
		indent           : ["error", "tab"],
		"linebreak-style": ["error", "windows"],

		// if else try catch 换行
		"brace-style": ["error", "stroustrup", { allowSingleLine: false }],

		// 操作符周围前后必须空格
		"space-infix-ops": ["error"],
        
		// 提醒尾逗号 , 微信浏览器 , uc浏览器的问题
		"comma-dangle": ["warn", "never"]
		// # ECMAScript 6
		// # Deprecated
		// # Removed
	},
	overrides: [
		{
			files: ["*.vue"],
			rules: { "vue/multi-word-component-names": 0 }
		}
	]
};

.eslintignore 规则：

# /node_modules/* and /bower_components/* ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js

完成主页侧边栏

主页左侧侧边栏为一个组件

在编写中应注意：

• 添加doc文档注释
• 在没有后端数据时，利用mock来模拟后端数据

完成主页的布局与数据交互

主页是所有的数据与交互的集中展示地

开发中应尽量遵循vue规范，以组件化、高复用为目标

• 编写TS代码时增加TsDoc，以便项目的维护
• 注释应简洁明了
• 祝开发顺利

前端 Vue 规范

前端 Vue 规范

文件命名

统一小写，多个单词作为文件名使用分隔符 -

// bad
EntityList.vue;
entityList.vue;

// good
entity - list.vue;

紧密耦合的组件命名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名

// bad
components/
|- todo-list.vue
|- todo-item.vue
└─ todo-button.vue

// good
components/
|- todo-list.vue
|- todo-list-item.vue
└─ todo-list-item-button.vue

自闭合组件

在单文件组件中没有内容的组件应该是自闭合的

<!-- bad -->
<u-input></u-input>

<!-- good -->
<u-input />

指令缩写

用 **:**表示 v-bind: ，用 **@**表示 v-on

<!-- bad -->
<input v-bind:value="value" v-on:input="onInput" />

<!-- good -->
<input :value="value" @input="onInput" />

组件数据

组件的 data 必须是一个函数,并且建议在此不使用箭头函数

// bad
export default {
	data: () => ({
		foo: "bar",
	}),
};

// good
export default {
	data() {
		return {
			foo: "bar",
		};
	},
};

props 命名

小驼峰命名。内容尽量详细，至少有默认值

// bad
greeting-text: String

// good
greetingText: { type: String, default: ''}

组件属性顺序和分行规则

顺序原则：重要属性放前面

顺序依据：依次指令->props属性-> 事件->dom属性(class有标记作用，除外)

分行规则：放在一行，重要内容较多时，可放置 2 ～ 3 行

<!-- bad -->
<u-select
    class="select"
    size="s"
    @select="searchEntity($event, row)"
    @blur="searchEntity($event, row)"
    v-model="row.variableId"
    :list="variableList" />

<!-- good -->
<u-select v-model="row.variableId" :list="variableList" size="s"
    @select="searchEntity($event, row)" @blur="searchEntity($event, row)" class="select" />

Vue API 顺序

export default {
	name: "",
	/*1. Vue扩展 */
	extends: "", // extends和mixins都扩展逻辑，需要重点放前面
	mixins: [],
	components: {},
	/* 2. Vue数据 */
	props: {},
	model: { prop: "", event: "" }, // model 会使用到 props
	data() {
		return {};
	},
	computed: {},
	watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
	/* 3. Vue资源 */
	filters: {},
	directives: {},
	/* 4. Vue生命周期 */
	created() {},
	mounted() {},
	destroy() {},
	/* 5. Vue方法 */
	methods: {}, // all the methods should be put here in the last
};

ue 组件顶级标签顺序

顺序保持一致，且标签之间留有空行。template 第一层级下四个空格，script 和 style 第一层级都不加空格

<template>
    <div></div>
</template>

<script>
export default {}
</script>

<style>
.app {}
</style>

import 引入顺序 V1.1

原则：同等类型的放一起，优先放 mixins 和 components 等 UI 资源。忌随意放置

// bad
import { getAllEntityList, getVariableGroup } from "@/server/api";
import { helpers } from "vuelidate/lib/validators";
import { getRepeatLine } from "@/utils/common";
import { CloseModalMixin, InvalidCheckMixin } from "@/components/common/mixins";
import VSearchSelect from "@/components/variable/v-search-select";
import EModifyModal from "@/components/entity/e-modify-modal";
import { MODIFY_MODAL_TYPE } from "@/utils/config";
import { botIdLoc, custIdLoc } from "@/utils/locs";

// good
import { CloseModalMixin, InvalidCheckMixin } from "@/components/common/mixins";
import VSearchSelect from "@/components/variable/v-search-select";
import EModifyModal from "@/components/entity/e-modify-modal";
import { getAllEntityList, getVariableGroup } from "@/server/api";
import { helpers } from "vuelidate/lib/validators";
import { MODIFY_MODAL_TYPE } from "@/utils/config";
import { getRepeatLine } from "@/utils/common";
import { botIdLoc, custIdLoc } from "@/utils/locs";

Vue 复杂 data 加注释/分组 V1.1

data 数据是连接 View 和 Modal 的基础，当 ViewModal 复杂时，建议进行注释并分组。另外，当 data 过于复杂时应考虑优化重构。

// bad
data() {
    return {
        isOpenModal: false,
        list: [],
        groupList: [],
        searchParams: { groupId: '', searchParam: '', searchType: '' },
        pageParam: { currentPage: 1, pageSize: 50 },
        totalCount: 0,
        groupId: '',
        typeList: [],
        defaultType: 'paramName'
    }
}

// good
data() {
    return {
        variableList: [],
        groupList: [],
        typeList: [],

        /*
        * 查询参数
        * 组与组之间通过空行区分
        */
        searchParams: { groupId: '', searchParam: '', searchType: '', currentPage: 1, pageSize: 50 },
        totalCount: 0,
        defaultType: '',

        isOpenModal: false
    }
}

参考链接

Vue 官方风格指南(opens new window)

有赞风格指南

完善首页布局

需要完善以下界面：

• 字体大小
• 添加字体family
• 完善缩放、不同大小的窗口下的展示

添加登录/注册功能

首页的登录与注册在一个页面

增加完善的首页登录/注册功能