English | [įŽäŊä¸æ](https://github.com/vitjs/vit/blob/master/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;
```
```json
// 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
```shell
$ yarn upgrade --scope @vitjs
```
### Application Template
For more details, please refer directly to the application template **[theprimone/vite-react](https://github.com/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.