Ray Template

English | 简体中文

A completely free, efficient, feature complete and based on vite5. x & ts(x) & pinia & vue3. x and other latest technology in the background template.

🌻 Intro

Ray Template uses cutting-edge front-end technology, abandoning complexity and bloat, using modular design, decoupling data, methods and views, focusing on business development. Provide rich configuration and rich template Hooks, support personalized customization, to meet your project needs.

✨ Features

• New technology stack: using ts(x), vite5. x, vue3. x, pinia and other front-end cutting-edge technology development
• Theme: configurable theme
• Internationalization: built-in perfect internationalization solution
• Permissions: built-in perfect dynamic routing permission generation solution
• Components: secondary encapsulation of multiple common components
• Toolkit: common tool function packaging
• Cache: arbitrary depth page caching
• Modular design: decoupling management data, methods, views, rest assured secondary development
• Configurable: support rich configuration items
• Code style: built-in prettier, eslint and other code style tools
• Multi-terminal adaptation: support pc, phone, pad
• Documentation: complete documentation
• Mock data: built-in Mock data solution
• Axios request: the plug-in design is used to encapsulate the axios library interceptor twice, which makes the interceptor more flexible
• SVG: built-in svg icon solution
• Hooks: based on the template characteristics of the encapsulated hooks to make it easier to use some functions of the template
• TypeScript: provide a complete type
• Vitest: built-in vitest test solution

👀 Preview

• Preview

📌 Documentation

• Documentation

🔋 Change Log

• Change Log

🪴 Prepare

• Node and git - project development environment
• Vite - familiar with vite features
• Vue3 - familiar with Vue basic syntax
• TypeScript - familiar with TypeScript basic syntax
• ES6+ - familiar with es6 basic syntax
• Vue-Hooks-Plus - familiar with vue-hooks-plus useRequest method basic use
• Vue-Router-Next - familiar with vue-router4.x basic use
• Naive-UI - naive ui basic use
• Mock.js - mockjs basic syntax
• Pinia - state manager pinia usage
• TSX - tsx basic syntax
• Vitest - vitest basic use

📦 Setup

Get Project

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

Pull dependencies

pnpm i

Test project

pnpm test

Startup project

pnpm dev

Build project

pnpm build

Preview project

pnpm preview

Report project

pnpm report

Development

Just delete the files under views/demo, router/modules/demo to get a clean project template.

🪴 Project Activities

Contributors

Thanks for all their contributions 🐝 !

Browser Support

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

📄 License

MIT License © 2022-PRESENT Ray