ray-template

19,936 153

vite vue3 ray-template vue3-tsx-vite-pinia ray template admin template 中后台模板

Install
`npm install ray-template`
Latest Version:	5.0.10 (Jan 15, 2025)
Vue:	3
License:	MIT
Last Updated:	Sep 19, 2026
Links:	GitHub · npm

Maintainer: account_name_ray

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 下的文件即可得到一个干净的项目模板。

🪴 项目活动

Alt

贡献者

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

浏览器支持

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

📄 证书

Related Packages

jy-smart-platform

2,149 153

admin template ray template ray-template vite vue3 vue3-tsx-vite-pinia 中后台模板

vite-plugin-vue2

Vite plugin for Vue2

1,474,659 618

vite vue2

@vue-vine/vite-plugin

Official Vite plugin for Vue Vine

95,680 1,442

vite vue

vite-plugin-git-revision

Vite plugin that generates VERSION and COMMITHASH files during build based on a...

21,961 11