ray-template v5.0.10

Ray Template

简体中文 | English

一个 完全免费、高效、特性完整 并且基于 vite5.x & ts(x) & pinia & vue3.x 等最新技术的中后台模板。

🌻 简介

Ray Template采用前沿前端技术，摒弃繁杂与臃肿，采用模块化设计，解耦数据、方法和视图，专注业务开发。提供丰富配置和丰富的模板 Hooks，支持个性化定制，满足你的项目需求。

✨ 特性

• 全新技术栈：使用 ts(x), vite5.x, vue3.x, pinia 等前端前沿技术开发
• 主题：可配置的主题
• 国际化：内置完善的国际化方案
• 权限：内置完善的动态路由权限生成方案
• 组件：二次封装了多个常用的组件
• 工具包：常用的工具函数封装
• 缓存：任意深度页面缓存
• 模块化设计：解耦管理的数据、方法、视图，放心二次开发
• 配置化：支持丰富的配置项
• 代码风格：内置 prettier, eslint 等代码风格工具
• 多端适配：支持 pc, phone, pad
• 文档：完善的文档
• Mock 数据：内置 Mock 数据方案
• Axios 请求：采用插件式设计二次封装 axios 库拦截器，让拦截器更加灵活
• SVG：内置 svg icon 解决方案
• Hooks：基于模板特性封装的 hooks 让你更加方便的使用模板一些功能
• TypeScript：提供完整的类型
• Vitest：内置 vitest 测试方案

👀 预览地址

• 点击预览

📌 文档地址

• 文档

🔋 更新日志

• 更新日志

🪴 准备

• Node 和 git - 项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉 TypeScript 基本语法
• ES6+ - 熟悉 es6 基本语法
• Vue-Hooks-Plus - 熟悉 vue-hooks-plus useRequest 方法的基本使用
• Vue-Router-Next - 熟悉 vue-router4.x 基本使用
• Naive-UI - naive ui 基本使用
• Mock.js - mockjs 基本语法
• Pinia - 状态管理器 pinia 使用
• TSX - tsx 基本语法
• Vitest - vitest 基本使用

📦 起步

获取项目

# github
git clone https://github.com/XiaoDaiGua-Ray/ray-template.git

拉取依赖

pnpm i

测试项目

pnpm test

启动项目

pnpm dev

项目打包

pnpm build

预览项目

pnpm preview

体积分析

pnpm report

快速开发

只需要删除 views/demo, router/modules/demo 下的文件即可得到一个干净的项目模板。

🪴 项目活动

贡献者

感谢他们的所做的一切贡献 🐝 ！

浏览器支持

📄 证书

MIT License © 2022-PRESENT Ray