Vue 2.7 + Vite 脚手架

Vue2.7 已经发布正式版啦，不出意外的话这应该是 Vue2 的最后一个版本了，但是很多公司目前还没有升级 Vue3 的打算（比如我们）。

所以封装了这么一个开箱即用的脚手架模板，脚手架的功能可以看下面的功能列表小节，并且配备完整的技术文档。

可以直接使用，也可以当作学习源码。

教程目录

1. 工程化实践
   • Eslint 格式化 JS 代码
   • Stylelint 格式化 CSS 代码
   • Husky 提交时自动格式化代码
   • Commitlint 校验 Commit Message
2. 全家桶
   • 路由 vue-router
   • 全局状态管理 pinia
   • 组件库
3. 更多功能
   • Axios 封装及接口管理
   • Css 样式处理
   • Vite 基础配置

基础搭建

在这里我们使用的是 pnpm 来作为本项目的包管理工具。

# 安装依赖
pnpm i

# 运行
pnpm run dev

# 打包
pnpm run build

# 打包文件预览
pnpm run preview

本人开发环境

node v16.13.1（大于 14 版本即可）

pnpm v6.30.0

插件安装

此脚手架必须安以下依赖才能保证，代码自动格式化的有效运行：

• Vetur
• EditorConfig for VS Code
• ESLint
• Stylelint

功能列表

• [x] Vue2.7 + Vite
• [x] Eslint、Stylelint、Commitlint 统一开发规范
• [x] husky + lint-staged （git commit 时自动格式化代码）
• [x] Vue 全家桶集成
• [x] Axios 封装及接口管理
• [x] Css 样式处理
• [x] vite.config.js 基础配置
• [x] 跨域配置
• [x] 多环境变量配置
• [x] 浏览器构建兼容性