Awesome Open Source
Awesome Open Source

English | 简体中文

Vit logo

GitHub stars npm package node compatility vite compatility

Vit 🚀

React application framework inspired by UmiJS.

  • ⚡️ Manually Defined Routing
  • ✨ Routing-based Code Splitting
  • 🎁 Exported Pure Static Application
  • 🎨 Mock Data, Usable in the Production

Routing

The framework takes over route definition and rendering, application entry. Developers only focus on business development after configure the route definition.

Mock Data

Based on vite-plugin-mock, Built-in interception for fetch, you can easily use mock data in the production environment to facilitate project preview.

How to use?

Install

# Vite plugin, Core function realization
$ yarn add @vitjs/vit --dev

# Vit app runtime, provide application runtime related components
$ yarn add @vitjs/runtime

Config

<!-- index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/@vit-app"></script>
</body>
// vite.config.ts
import type { UserConfig } from 'vite';
import vitApp from '@vitjs/vit';

const config: UserConfig = {
  plugins: [
    vitApp({
      // Configure routing according to the project structure, and import components uniformly from the `src` directory
      // icon currently supports automatic escaping as icons in [`@ant-design/icons`](https://ant.design/components/icon/#List-of-icons)
      routes: [
        {
          path: '/',
          component: './layouts/BasicLayout',
          routes: [
            {
              path: '/',
              redirect: '/welcome',
              exact: true,
            },
            {
              path: '/welcome',
              icon: 'smile',
              name: 'Welcome',
              component: './pages/Welcome',
            },
          ],
        },
      ],
    }),
  ],
};

export default config;
// tsconfig.json
// For better TS type prompt, you need to add the following configuration
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@@/*": ["./src/.vit/*"]
    }
  }
}

In addition, the plugin will generate runtime dependencies, so the build script of the application needs to remove the tsc command. In the end, add the directory .vit where the temporary files are located to .gitignore.

Upgrade

$ yarn upgrade --scope @vitjs

Application Template

For more details, please refer directly to the application template theprimone/vite-react. It is worth noting that the current plugin is still under heavy development, API and usages are not set in stone yet.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (246,644) 
Reactjs (70,715) 
Vite (646) 
Umi (197) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194