Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xsf0105/my-vue3-template
My starter template for Vue3, Best practices！
https://github.com/xsf0105/my-vue3-template
setup vite vue3
Last synced: 1 day ago
JSON representation
My starter template for Vue3, Best practices！
- Host: GitHub
- URL: https://github.com/xsf0105/my-vue3-template
- Owner: xsf0105
- Created: 2016-08-18T09:42:15.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T02:42:32.000Z (3 months ago)
- Last Synced: 2024-12-13T22:11:42.978Z (8 days ago)
- Topics: setup, vite, vue3
- Language: Vue
- Homepage:
- Size: 11.4 MB
- Stars: 547
- Watchers: 24
- Forks: 130
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome - xsf0105/my-vue3-template - My starter template for Vue3. Vue Best practices on Mobile！(含viewport 适配方案, axios 封装) (TypeScript)
README
## Introduction
Vue3 Admin Vite is a free and open source middle and background management system basic solution, based on mainstream framework such as Vue3, TypeScript, Element Plus, Pinia and Vite
## Feature
- **Vue3**：The latest Vue3 composition API using Vue3 + script setup
- **Element Plus**：Vue3 version of Element UI
- **Pinia**: An alternative to Vuex in Vue3
- **Vite**：Really fast
- **Vue Router**：router
- **TypeScript**：JavaScript With Syntax For Types
- **PNPM**：Faster, disk space saving package management tool
- **Scss**：Consistent with Element Plus
- **CSS variable**：Mainly controls the layout and color of the item
- **ESlint**：Code verification
- **Prettier**： Code formatting
- **Axios**: Promise based HTTP client (encapsulated)
- **UnoCSS**: Real-time atomized CSS engine with high performance and flexibility
- **Mobile Compatible**: The layout is compatible with mobile page resolution
## Functions
- **User management**: Log in and out of the demo
- **Authority management**: Page-level permissions (dynamic routing), button-level permissions (directive permissions, permission functions), and route navigation guards
- **Multiple Environments**: Development, Staging, Production
- **Multiple themes**: Normal, Dark, Dark Blue, three theme modes
- **Multiple layouts**：Left, Top, Left Top, three layout modes
- **Error page**: 403, 404
- **Dashboard**: Display different Dashboard pages according to different users
- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)
## 🚀 Development
```bash
# configure
1. installation of the recommended plugins in the .vscode directory
2. node version 18.x or 20+
3. pnpm version 8.x or latest
# clone
git clone https://github.com/xsf0105/my-vue3-template.git
# enter the project directory
cd my-vue3-template
# install dependencies
pnpm i
# start the service
pnpm dev
```
## ✔️ Preview
```bash
# stage environment
pnpm preview:stage
# prod environment
pnpm preview:prod
```
## 📦️ Multi-environment packaging
```bash
# build the stage environment
pnpm build:stage
# build the prod environment
pnpm build:prod
```
## 🔧 Code inspection
```bash
# code formatting
pnpm lint
# unit test
pnpm test
```
## Git commit specification reference
- `feat` add new functions
- `fix` Fix issues/bugs
- `perf` Optimize performance
- `style` Change the code style without affecting the running result
- `refactor` Re-factor code
- `revert` Undo changes
- `test` Test related, does not involve changes to business code
- `docs` Documentation and Annotation
- `chore` Updating dependencies/modifying scaffolding configuration, etc.
- `workflow` Work flow Improvements
- `ci` CICD
- `types` Type definition
- `wip` In development