【大厂企业级项目架构】之项目搭建和代码规范

首先简单列一下，在一个新项目初始阶段，我们应该做些什么。

• 首先是技术选型，比如框架选型（Vue|React等），构建工具，包管理工具等等。
• 代码规范，提交规范
• 环境区分，包括开发、测试、生产的构建区分等
• 样式方案，图标方案，布局方案，组件库等
• 基础能力，包括路由、状态管理、持久化、网络请求等
• mock方案
• 根据自身的业务类型来封装相应的公共模块
• 单元测试
• 自动化构建部署
• …

本篇将以vue3 + vite2 + ts + pnpm来搭建我们的项目，这是大厂的企业级项目架构系列的第一篇，我会先讲解项目的搭建和代码规范。跟着我一步步慢慢搭建出一个大厂该有的企业级项目。

耐心看完，你将会了解到在项目开始阶段是如何落地代码规范的，我们将使用prettier + eslint + stylelint + lint-staged来规范我们的代码。

搭建项目框架

node版本 16.16.0

1.使用vite创建项

// 不同版本或者包管理工具的创建命令可看vite官网
pnpm create vite 

创建完后的项目结构如下

├── .vscode存放本项目推荐安装的vscode插件等
├── README.md
├── .gitignore 提交到git时需要忽略的文件
├── index.html 页面模板
├── node_modules 安装的依赖
├── package.json
├── pnpm-lock.yaml
├── public 静态资源目录，放在这个目录下的资源只会被简单地复制，不会被vite处理，需要绝对路径引用
│ └── vite.svg
├── src源码目录
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── style.css
│ └── vite-env.d.ts
├── tsconfig.jsonts配置文件，针对我们的源码的ts配置文件
├── tsconfig.node.json 专门针对vite.config.ts的ts配置文件，上面的tsconfig.json引用了这个文件
└── vite.config.ts vite配置文件 

着重解释一下两个文件

初始化的时候项目依赖如下（package.json）

"dependencies": {"vue": "^3.2.37" // 用vue，那肯定得依赖vue了
},
"devDependencies": {"@vitejs/plugin-vue": "^3.0.0", // vite的vue插件，用来解析vue的单文件组件"typescript": "^4.6.4", // 用到ts，就需要typescript"vite": "^3.0.0", // 用vite做构建"vue-tsc": "^0.38.4" //针对vue单文件组件，使用vue-tsc做类型检查
} 

全局类型声明文件vite-env.d.ts

/// <reference types="vite/client" />
// 上面是三斜线指令，用于告诉编译器在编译的过程中要引用额外的文件
// 如果是types属性，则用于声明对另一个库的依赖，如上面，则是对vite这个库下的cliend.d.ts的引用，具体可见node_modules
// 如果是path属性，则用于声明对另一个文件的依赖
// 因为这是一个全局的声明文件，所以使用了三斜线指令，如果用了import，则文件就会变成了模块声明文件了
// 下面的意思是是，全局定义一个模块，当import xxx from 'xx.vue';的方式引入模板文件的时候，编译器不会报错
// 且引入的类型是DefineComponent类型
declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
} 

代码规范

创建好项目之后，就可以接入代码规范了

使用editorConfig统一不同编辑器的编码风格

在项目根目录下增加.editorConfig，内容如下

root = true # 表明这是最顶层的editorConfig配置文件
[*] # 表示适用于所有文件
charset = utf-8 # 字符集 utf-8
indent_style = tab # 缩进风格 space|tab
indent_size = 4 # 缩进大小是几个空格
end_of_line = lf # 控制换行类型 lf|cr|crlf
trim_trailing_whitespace = true # 去除行首任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false 

增加配置后安装EditorConfig for VS Code插件即可

使用prettier格式化代码

在根目录下创建.prettierrc，内容如下

module.exports = {printWidth: 100, // 1行最多100个字符semi: true, // 要分号结尾//vueIndentScriptAndStyle: true, // 配置了这个，vue模板文件里面的script 和 style 内就会缩进singleQuote: true, // 使用单引号// trailingComma: 'all', // 末尾要有逗号proseWrap: 'preserve', // 针对markdown文件，如果超过了最大字符数 always 换行| never 不换行| preserve 原样展示htmlWhitespaceSensitivity: 'strict', // html空格敏感endOfLine: 'auto', // 行结尾，跟editorConfig的end_of_line一样
}; 

增加.prettierignore，忽略不需要格式化的内容

/dist/*
/node_modules/**
pnpm-lock.yaml
**/*.svg
**/*.sh
/public/* 

增加配置后，安装vscode插件 Prettier - Code formatter，如果想要保存的时候自动格式化，则可以添加配置，为了不影响其他项目，可以在自己项目下的.vscode目录