团队前端项目架构技术栈前端项目的技术栈：Vue框架前端项目UI库：基于先前几个已跑起来的项目，选择AntDesignVu

基于 @vue/cli 搭建基础的模板；使用cli3 、cli4创建项目 vue create project；Linter / Formatter 时选择Eslint + Prettier
目录结构

ESLint + Prettier 结合使用进行代码规范实践

eslint（包括其他一些 lint 工具）的主要功能包含代码格式的校验，代码质量的校验

prettier 只是代码格式的校验（并格式化代码），不会对代码质量进行校验

格式的校验：通常指的是：单行代码长度、tab长度、空格、逗号表达式等问题

质量的校验：未使用变量、三等号、全局变量声明等问题

前必须遵循一些自定义ESlint规范（后续项目中新增）：

ESlint - rule:

"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

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

"no-alert": process.env.NODE_ENV === "production" ? "error" : "off",

"space-before-function-paren": 0, // 强制在 function的左括号之前使用一致的空格

"no-const-assign": 2,

'camelcase': 'error' // 变量命名默认选用驼峰法

.prettierrc.js

module.exports = {

indent_style: 'space',

indent_size: 2,

trim_trailing_whitespace: true,

insert_final_newline: true,

semi: false,

singleQuote: true,

eslintIntegration: true,

TrailingCooma: "all", // 对象内空格

tabWidth: 2

}

Vs Code中安装Eslint插件和prettier插件，并且设置对应项目的配置文件实现一键格式化

团队前端项目架构