🌻 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 Vue 3 + TSX, Vite 8 / Rolldown, Pinia 4, Vue Router 5 and Naive UI
• 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
• Faker - localized demo data with vite-plugin-mock-dev-server
• Pinia - state manager pinia usage
• TSX - tsx basic syntax
• Vitest - vitest basic use

Toolchain and AI Harness

Use Node.js 26.13.0 LTS and pnpm 12.16.1. Versions are pinned in .nvmrc, package.json and pnpm-lock.yaml. All retained direct dependencies use current stable versions, except TypeScript 6.0.3: Vue Language Tools and typescript-eslint do not yet support TypeScript 7. See upgrade notes and verification.

The example uses nvm; with fnm, replace the first two commands with fnm install && fnm use.

nvm install
nvm use
npm install --global [email protected]
pnpm install --frozen-lockfile
pnpm env:check
pnpm check

| Command | Purpose / output | | --------------------------------- | ---------------------------------------------------------- | | pnpm dev | Start development at http://127.0.0.1:9527/ray-template/ | | pnpm typecheck | Check application, test and build configuration types | | pnpm lint / pnpm format:check | Read-only lint / formatting checks | | pnpm lint:fix / pnpm format | Explicit code fixes / formatting | | pnpm test:run | Run unit tests once; pnpm test starts watch mode | | pnpm build | Typecheck and build into dist/production | | pnpm dev-build | Build with sourcemaps into dist/development | | pnpm preview | Serve the production build locally | | pnpm report | Write a static bundle report without opening a browser | | pnpm check | Validate the harness, types, lint, format, tests and build |

CLI commands return a nonzero exit code on failure. Use pnpm dev --host 0.0.0.0 only when you need LAN access. Build modes, CDN configuration, aliases and the deployment base are in vite.custom.config.ts.

Start with AGENTS.md and the AI Harness. Run pnpm harness context to find task entry points and pnpm harness verify to run the full checks and save a local verification report.

CI runs pnpm check on Linux, Windows and macOS. Only successful main pushes deploy to the existing dist branch. Dependabot proposes weekly dependency and Actions updates.

📦 Setup

Get Project

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

Pull dependencies

pnpm install --frozen-lockfile

Test project

pnpm test:run

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

!Alt

Contributors

Thanks for all their contributions 🐝 !

Browser Support

Build target: Vite 8 Baseline Widely Available (Chrome/Edge 111+, Firefox 114+, Safari/iOS 16.4+). Test product changes in current browsers; no IE 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

Hooks, Layout & Icons

• Hooks examples: /template-hooks, /web-hooks, covering all 19 custom hooks.
• Layout modes and slots: /layout-demo, with live persistent preferences.
• Namespaced SVG icons: /svg-icons; pnpm icons:generate, pnpm icons:check.
• Pinia state: temporary UI state in runtime, saved preferences in setting.