https://github.com/vitjs/vit

🚀 React application framework inspired by UmiJS / 类 UmiJS 的 React 应用框架
https://github.com/vitjs/vit

mock-data react react-framework umi umijs vit vite vite-plugin vite-plugin-react vitjs

Last synced: about 1 month ago
JSON representation

🚀 React application framework inspired by UmiJS / 类 UmiJS 的 React 应用框架

• Host: GitHub
• URL: https://github.com/vitjs/vit
• Owner: vitjs
• License: mit
• Created: 2021-03-24T15:10:19.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-24T04:41:15.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T13:42:53.760Z (5 months ago)
• Topics: mock-data, react, react-framework, umi, umijs, vit, vite, vite-plugin, vite-plugin-react, vitjs
• Language: TypeScript
• Homepage:
• Size: 543 KB
• Stars: 99
• Watchers: 3
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
English | [简体中文](./README.zh-CN.md)



  

    

  





  

  

  

  



# 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](https://github.com/anncwb/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

```shell

# Vite plugin, Core function realization

$ yarn add @vitjs/vit --dev

# Vit app runtime, provide application runtime related components

$ yarn add @vitjs/runtime

```

### Config

```html

  


  


```

```ts

// 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;

```

```js

// 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`.

### Auto import

[`globalImports`](https://github.com/vitjs/vit/blob/master/packages/vit/src/types.ts#L9) lets you customize the files that need to be imported globally automatically. By default, you can see [`import.ts`](https://github.com/vitjs/vit/blob/master/packages/vit/src/generateFiles/import.ts#L2)

In particular, [`_app.tsx`](https://github.com/vitjs/vit/blob/master/packages/core/src/Service/index.ts#L21) can be automatically import to rewrite the application's rendering logic.

### Upgrade

```shell

$ yarn upgrade --scope @vitjs

$ yarn upgrade --scope @vitjs --latest

```

### Application Template

For more details, please refer directly to the application template **[yunsii/vite-react](https://github.com/yunsii/vite-react)**. It is worth noting that the current plugin is still under heavy development, API and usages are not set in stone yet.