Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DMaiGit/rsbuild_vue3_h5_template
This project is a template for Vue 3, integrated with RSBuild for development and build processes. It includes popular libraries such as Axios, Pinia, Vant, and Vue Router.
https://github.com/DMaiGit/rsbuild_vue3_h5_template
Last synced: 3 months ago
JSON representation
This project is a template for Vue 3, integrated with RSBuild for development and build processes. It includes popular libraries such as Axios, Pinia, Vant, and Vue Router.
- Host: GitHub
- URL: https://github.com/DMaiGit/rsbuild_vue3_h5_template
- Owner: DMaiGit
- License: mit
- Created: 2024-03-04T08:46:08.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-08T07:21:49.000Z (11 months ago)
- Last Synced: 2024-08-02T13:17:41.028Z (6 months ago)
- Language: TypeScript
- Size: 225 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rspack - rsbuild_vue3_h5_template
README
๐ RSBuild Vue3 H5 Template ๐
๐ This Vue 3 template, integrated with RSBuild, streamlines development and build processes with popular libraries such as Axios, Pinia, Vant, and Vue Router. ๐
๐ฌ๐ง English
ย |ย
๐จ๐ณ ็ฎไฝไธญๆ
---
## ๐ Table of Contents
- [Requirements](#-requirements)
- [Project Structure](#-project-structure)
- [Quick Start](#-quick-start)
- [Features](#-features)
## ๐ Requirements
- **Node.js** >= 20 ๐ข
- **npm** >= 10 ๐ฆ
- **Vue** 3 โก
- **Vue Router** >= 4 ๐ฆ
- **Pinia** >= 2 ๐ฒ
- **TypeScript** >= 5 ๐
- **Vant-Ui** 4 ๐ฑ
- **Axios** >= 1.6 ๐
> **๐ก Tip**: ๐ Use PNPM to unlock RSBuild's full debug capabilities! ๐ Without PNPM, you might miss out on `rsbuild`'s debug features.
## ๐ Project Structure
Below is the tree structure of the project, providing an overview and purpose of each file and directory:
```plaintext
root
โโโ .husky/ # Husky hooks for enforcing good commit practices
โโโ .vscode/ # VSCode specific settings
โโโ dist/ # Compiled files ready to be deployed
โโโ public/ # Public assets that will not be processed by Webpack
โ โโโ favicon.ico # Favicon for the website
โ โโโ index.html # Entry HTML for the application
โโโ src/ # Source code of the application
โ โโโ @types/ # TypeScript typings specific to the project
โ โโโ api/ # API service functions and setup
โ โโโ assets/ # Static assets such as images and global styles
โ โ โโโ images/ # Images used within the application
โ โโโ components/ # Reusable Vue components
โ โโโ mock/ # Mock data for testing and development
โ โโโ routes/ # Application routing definitions
โ โโโ static/ # Static files that are copied to the output directory
โ โ โโโ fonts/ # Fonts used in the application
โ โโโ stores/ # Pinia stores for state management
โ โโโ styles/ # Global and modular styles
โ โโโ utils/ # Utility and helper functions
โ โโโ views/ # Vue components that act as pages
โ โ โโโ main/ # Main views of the application
โ โโโ App.vue # Root Vue component
โ โโโ env.d.ts # Environment variable typings for TypeScript
โ โโโ index.ts # Main entry point for the Vue application
โโโ .browserslistrc # Browser compatibility configuration
โโโ .editorconfig # Coding style definitions for IDEs
โโโ .env.development # Environment variables for development
โโโ .env.local # Local environment variables
โโโ .env.production # Environment variables for production
โโโ .eslintrc.js # ESLint rules and configurations
โโโ .gitignore # Specifies files to be ignored in version control
โโโ commitlint.config.js # Configuration for commit message linting
โโโ package.json # Project metadata and dependencies
โโโ postcss.config.js # Configuration for PostCSS
โโโ README.md # The descriptive file for the project
โโโ README.zh-CN.md # Chinese version of the README, provides project details for Chinese-speaking users.
โโโ rsbuild.config.ts # Configuration file for RSBuild, which is used to define and manage build tasks and project build settings.
โโโ tailwind.config.js # Tailwind CSS configuration file, used to customize Tailwind's default settings to match the project's design requirements.
โโโ tsconfig.json # TypeScript compiler configuration file, defines how TypeScript compiles the code.
```
## ๐ Quick Start
```bash
npm install # ๐ฆ Install project dependencies
npm run dev # ๐ Start the development server
npm run dev-debug # ๐ Start with RSBuild debug
npm run build # ๐ Build for production
npm run build-debug # ๐ง Build for production with RSBuild debug
npm run preview # ๐ฅ Preview the built project
npm run test # ๐งช Run tests (not specified yet)
npm run prepare # ๐ Prepare Husky
npm run commit # ๐ฌ Run Commitizen for commits
```
## โจ Features
- Vue 3: Progressive JavaScript framework for UI development. ๐
- Axios: Promise-based HTTP client. ๐
- Pinia: State management for Vue. ๐
- Vant: Mobile-first Vue UI library. ๐ฑ
- Vue Router: Official router for Vue.js. ๐ฃ
- TypeScript: JavaScript with type safety. ๐
- Tailwind CSS: Utility-first CSS framework. ๐
- ##### ๐ Development Tools and Libraries
- @commitlint/cli & @commitlint/config-conventional: Ensures commit messages follow the conventional commit format. ๐
- cross-env: Sets environment variables across platforms. ๐
- eslint-plugin-vue & @typescript-eslint/eslint-plugin: Provides linting for Vue and TypeScript files. ๐
- husky & commitizen: Manages Git hooks and commit message formats. ๐ถ
- vue-tsc & tailwindcss: Supports type checking for Vue and utility-first styling with Tailwind CSS. ๐จ