sankeyangshu/vue-template-base

使用 Vue3 + TS 构建的项目基础模版

vue-template-base

使用 Vue3 + TS 构建的项目基础模版

---

简介

🚀🚀🚀 vue-template-base 使用了最新的Vue3.2、Vite4、Pinia2、Typescript等主流技术开发，集成 Dark Mode(暗黑)模式，并且持久化保存，集成了代码规范检查工具Eslint、Prettier、Stylelint。你可以在此之上直接开发你的业务代码！希望你能喜欢。👋👋👋

注：如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！

✨ 项目功能

• 🚀 使用 Vue3.2 + TypeScript 开发，单文件组件＜ script setup ＞
• 🚀 采用 Vite4 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理…）
• 🚀 整个项目集成了 TypeScript
• 🚀 使用 Pinia 替代 Vuex，轻量、简单、易用，集成 Pinia 持久化插件
• 🚀 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范（项目规范配置）
• 🚀 使用 husky、lint-staged、commitlint 规范提交信息（项目规范配置）

基础知识

提前了解和学习这些知识会对使用本项目有很大的帮助。

• Vue3 - 熟悉 Vue3 基础语法
• Vite - 熟悉 Vite 特性
• Pinia - 熟悉 Pinia 特性
• TypeScript - 熟悉 TypeScript 基本语法
• Vue-Router - 熟悉 Vue-Router基本使用
• Icones - 本项目推荐图标库，当然你也可以使用 IconSVg
• Es6+ - 熟悉 ES6 基本语法

环境准备

本地环境需要安装 pnpm7.x、Node.js 和 Git

• 必须使用pnpm7.x，否则依赖可能安装不上。
• Node.js 版本要求12.x以上，这里推荐 16.x 及以上。

Vscode 配套插件

如果你使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

• Volar - vue 开发必备
• ESLint - 脚本代码检查
• Prettier - 代码格式化
• Stylelint - css 格式化

安装和使用

🚀 使用脚手架

Galaxy-CLI 是一个用于快速生成各种前后端项目模版的脚手架。

# 选择合适的包管理工具安装脚手架
npm i -g galaxy-cli-core

# yarn
yarn global add galaxy-cli-core

# 推荐使用pnpm进行安装
pnpm i -g galaxy-cli-core

# 创建项目,按照脚手架提示，选择vue-template-base模板
galaxy init <projectName>

# 进入项目目录
cd <projectName>

# 安装依赖 - 推荐使用pnpm
pnpm install

# 启动服务
pnpm dev

# 打包发布
pnpm build

克隆使用

# 克隆项目
git clone https://github.com/sankeyangshu/vue-template-base.git

# 进入项目目录
cd vue-template-base

# 安装依赖 - 推荐使用pnpm
pnpm install

# 启动服务
pnpm dev

# 打包发布
pnpm build

如何贡献

你可以提一个 issue 或者提交一个 Pull Request。

Pull Request:

1. Fork 代码
2. 创建自己的分支: git checkout -b feat/xxxx
3. 提交你的修改: git commit -am 'feat(function): add xxxxx'
4. 推送您的分支: git push origin feat/xxxx
5. 提交 pull request

Git 贡献提交规范

• feat: 新增功能
• fix: 修复 bug
• docs: 文档变更
• style: 代码格式（不影响功能，例如空格、分号等格式修正）
• refactor: 代码重构（不包括 bug 修复、功能新增）
• perf: 性能优化
• test: 添加、修改测试用例
• build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
• ci: 修改 CI 配置、脚本
• chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
• revert: 回滚 commit

浏览器支持

• 本地开发推荐使用 Chrome 最新版浏览器 Download。
• 生产环境支持现代浏览器，不在支持 IE 浏览器，更多浏览器可以查看 Can I Use Es Module。

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

许可证

MIT License © 2023-PRESENT sankeyangshu