当前位置: 首页>后端>正文

从 0 开始手把手带你搭建一套规范的 Vue3.5 项目工程环境

技术栈

  • Vite 3 - 构建工具(就是快!)
  • Vue 3 - 渐进式 JavaScript 框架
  • Vue Router - 官方路由管理器
  • Pinia - 值得你喜欢的 Vue Store
  • TDesign - TDesign 适配桌面端的组件库
  • Less - CSS 预处理器
  • Axios - 一个基于 promise 的网络请求库,可以用于浏览器和 node.js
  • Husky + Lint-Staged - Git Hook 工具
  • EditorConfig + ESLint + Prettier + Stylelint - 代码规范
  • Commitizen + Commitlint - 提交规范
  • GitHub Actions - 自动部署

基础搭建

请确保你的电脑上成功安装 Node.js,本项目使用 Vite 构建工具,需要 Node.js 版本 >= 12.0.0。

使用 Vite 快速初始化项目雏形

npm init @vitejs/app
yarn create @vitejs/app

然后按照终端提示完成以下操作:
1.输入项目名称
2.选择Vue3生态


从 0 开始手把手带你搭建一套规范的 Vue3.5 项目工程环境,第1张

3.安装依赖
4.启动项目


从 0 开始手把手带你搭建一套规范的 Vue3.5 项目工程环境,第2张

如上图,表示 Vite + Vue3 + TypeScript + Router + Pinia 简单的项目骨架搭建完毕,下面我们来为这个项目集成 Element Plus、Axios、Stylus/Sass/Less。
修改 Vite 配置文件

Vite 配置文件 vite.config.ts 位于根目录下,项目启动时会自动读取。
本项目先做一些简单配置,例如:设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。
关于 Vite 更多配置项及用法,请查看 Vite 官网 vitejs.dev/config/ 。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到,则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

    // 设置代理,根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})
规范目录结构
├── publish/
└── src/
    ├── assets/                    // 静态资源目录
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── style/                     // 通用 CSS 目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json
集成 UI 框架 Element Plus

1.安装支持 Vue3 的 UI 框架 Element Plus

npm i element-plus

2.在 main.ts 文件中挂载 Element Plus

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')
集成 HTTP 工具 Axios

安装 Axios(Axios 跟 Vue 版本没有直接关系,安装最新即可)

集成 CSS 预编译器 Stylus/Sass/Less

1.安装

npm i stylus -D
# or
npm i sass -D
npm i less -D

2.使用

<style lang="less ">
  ...
</style>

至此,一个基于 TypeScript + Vite + Vue3 + Vue Router + Pinia + Element Plus + Axios + Stylus/Sass/Less 的前端项目开发环境搭建完毕

代码规范

随着前端应用逐渐变得大型化和复杂化,在同一个项目中有多个人员参与时,每个人的前端能力程度不等,他们往往会用不同的编码风格和习惯在项目中写代码,长此下去,势必会让项目的健壮性越来越差。解决这些问题,理论上讲,口头约定和代码审查都可以,但是这种方式无法实时反馈,而且沟通成本过高,不够灵活,更关键的是无法把控。不以规矩,不能成方圆,我们不得不在项目使用一些工具来约束代码规范。
本文讲解如何使用 EditorConfig + Prettier + ESLint 组合来实现代码规范化。

这样做带来好处:

  • 解决团队之间代码不规范导致的可读性差和可维护性差的问题。
  • 解决团队成员不同编辑器导致的编码规范不统一问题。
  • 提前发现代码风格问题,给出对应规范提示,及时修复。
  • 减少代码审查过程中反反复复的修改过程,节约时间。
  • 自动格式化,统一编码风格,从此和脏乱差的代码说再见。
集成 Prettier 配置、 ESLint 配置

官网:prettier.io/ESLint(具体配置查看官网)

从 0 开始手把手带你搭建一套规范的 Vue3.5 项目工程环境,第3张
解决 Prettier 和 ESLint 的冲突

手动集成,会出现两者冲突问题,需要用到 eslint-plugin-prettier 和 eslint-config-prettier。

  • eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
  • eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。
    最后形成优先级:Prettier 配置规则 > ESLint 配置规则。

安装插件:

npm i eslint-plugin-prettier eslint-config-prettier -D

在 .eslintrc.js 添加 prettier 插件:

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}
集成 husky 和 lint-staged

我们在项目中已集成 ESLint 和 Prettier,在编码时,这些工具可以对我们写的代码进行实时校验,在一定程度上能有效规范我们写的代码,但团队可能会有些人觉得这些条条框框的限制很麻烦,选择视“提示”而不见,依旧按自己的一套风格来写代码,或者干脆禁用掉这些工具,开发完成就直接把代码提交到了仓库,日积月累,ESLint 也就形同虚设。

所以,我们还需要做一些限制,让没通过 ESLint 检测和修复的代码禁止提交,从而保证仓库代码都是符合规范的。

为了解决这个问题,我们需要用到 Git Hook,在本地执行 git commit 的时候,就对所提交的代码进行 ESLint 检测和修复(即执行 eslint --fix),如果这些代码没通过 ESLint 规则校验,则禁止提交。

实现这一功能,我们借助 [husky](https://link.juejin.cn

husky —— Git Hook 工具,可以设置在 git 各个阶段(pre-commitcommit-msgpre-push 等)触发我们的命令。
lint-staged —— 在 git 暂存的文件上运行 linters。

配置 husky

使用 husky-init 命令快速在项目初始化一个 husky 配置。

npx husky-init && npm install

这行命令做了四件事:
1.安装 husky 到开发依赖
2.在项目根目录下创建 .husky 目录
3.在 .husky 目录创建 pre-commit hook,并初始化 pre-commit 命令为 npm test
4.修改 package.json 的 scripts,增加 "prepare": "husky install"

上面这个 pre-commit hook 文件的作用是:当我们执行 git commit -m "xxx" 时,会先对 src 目录下所有的 .vue、.js、.ts 文件执行 eslint --fix 命令,如果 ESLint 通过,成功 commit,否则终止 commit。
但是又存在一个问题:有时候我们明明只改动了一两个文件,却要对所有的文件执行 eslint --fix。假如这是一个历史项目,我们在中途配置了 ESLint 规则,那么在提交代码时,也会对其他未修改的“历史”文件都进行检查,可能会造成大量文件出现 ESLint 错误,显然不是我们想要的结果。
我们要做到只用 ESLint 修复自己此次写的代码,而不去影响其他的代码。所以我们还需借助一个神奇的工具 lint-staged 。

配置 lint-staged

lint-staged 这个工具一般结合 husky 来使用,它可以让 husky 的 hook 触发的命令只作用于 git add那些文件(即 git 暂存区的文件),而不会影响到其他文件。

1.安装 lint-staged

npm i lint-staged -D

2.在 package.json里增加 lint-staged 配置项


从 0 开始手把手带你搭建一套规范的 Vue3.5 项目工程环境,第4张
"lint-staged": {
  "*.{vue,js,ts}": "eslint --fix"
},

这行命令表示:只对 git 暂存区的 .vue、.js、.ts 文件执行 eslint --fix。
3.修改 .husky/pre-commit hook 的触发命令为:npx lint-staged


从 0 开始手把手带你搭建一套规范的 Vue3.5 项目工程环境,第5张

现在我们提交代码时就会变成这样:
假如我们修改了 scr 目录下的 test-1.js、test-2.ts 和 test-3.md 文件,然后 git add ./src/,最后 git commit -m "test...",这时候就会只对 test-1.js、test-2.ts 这两个文件执行 eslint --fix。如果 ESLint 通过,成功提交,否则终止提交。从而保证了我们提交到 Git 仓库的代码都是规范的。

无论写代码还是做其他事情,都应该用长远的眼光来看,刚开始使用 ESint 的时候可能会有很多问题,改起来也很费时费力,只要坚持下去,代码质量和开发效率都会得到提升,前期的付出都是值得的。
这些工具并不是必须的,没有它们你同样可以可以完成功能开发,但是利用好这些工具,你可以写出更高质量的代码。特别是一些刚刚接触的人,可能会觉得麻烦而放弃使用这些工具,失去了一次提升编程能力的好机会。


https://www.xamrdz.com/backend/37g1938372.html

相关文章: