huatten / vue3-start-template

Vue3.3、Vite4、Pinia 开发构建用于初始化项目的模板

vue3-start-template

Vite4 - Vue3 - Pinia Start Template

Vite4 + Vue3 + JavaScript + Vue Router + Pinia + TDesign + Sass + Axios + ESLint + Stylelint + Prettier

介绍 📖

vue3-start-template 基于 Vue3.3、Vite4、Pinia 开发构建用于初始化项目的模板。

特性概览 🎨

• ⚡️ Vite 4 - born with fastness
• 🖖 Vue 3 - Composition API and <script setup>
• 🚦 Vue Router - The official router for Vue.js.
• 📦 Pinia - Intuitive, type safe and flexible Store for Vue
• 💻 TDesign - Vue Next for Web
• 🎨 Sass - It's CSS, with just a little more
• 🔗 Axios - Promise based HTTP client for the browser and node.js
• 🧰 Husky + Lint-Staged - Git Hook Tools
• 🛡️ EditorConfig + ESLint + Prettier + Stylelint + AlloyTeam JavaScript Style Guide - Code Standards
• 🔨 Commitizen + Commitlint - Submit Standards

代码规范格式化 🔨

• Prettier

  配置参考：https://www.prettier.cn

• ESLint

  配置参考：https://eslint.org/docs/user-guide/configuring

• Stylelint

  配置参考：https://stylelint.io

开发工具 📔

• npm - 包管理器
• Visual Stuido Code 扩展
  • Vite - 自动启动 Vite 服务器
  • Volar - Vue 3 <script setup> IDE 支持
  • EditorConfig for VS Code - 一套用于统一代码格式的解决方案
  • ESLint - 可组装的JavaScript和JSX检查工具
  • Prettier - 代码格式化工具
  • StyleLint - CSS 代码规范工具

文件资源目录 📚

vue3-start-template
├─ .vscode                # VSCode 推荐配置
├─ public                 # 静态资源文件（该文件夹不会被打包）
├─ src
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ directives          # 全局指令文件
│  ├─ hooks               # hooks封装
│  ├─ routers             # 路由管理
│  ├─ stores              # pinia store
│  ├─ styles              # 全局样式文件
│  ├─ utils               # 常用工具库
│  ├─ views               # 项目所有页面
│  ├─ App.vue             # 项目主组件
│  ├─ main.js             # 项目入口文件
├─ .commitlintrc.js       # commit提交规范配置
├─ .editorconfig          # 统一不同编辑器的编码风格
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.js           # Eslint 校验配置文件
├─ .gitignore             # 忽略 git 提交
├─ .npmcheckrc            # npm包检查忽略文件
├─ .prettierignore        # 忽略 Prettier 格式化
├─ .prettierrc.js         # Prettier 格式化配置
├─ .stylelintignore       # 忽略 stylelint 格式化
├─ .stylelintrc.js        # stylelint 样式格式化配置
├─ index.html             # 入口 html
├─ package-lock.json      # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ .postcssrc.js          # postcss 配置
├─ README.md              # README 介绍
├─ CHANGELOG.md           # 更新日志
└─ vite.config.js         # vite 全局配置文件