1.0.99 • Published 4 years ago

vite-plugin-react-umi v1.0.99

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

基于umi4的改造,以vite原生插件形式使用

执行原理:

UmiApp->getInitialState->access->路由检查权限->执行layout getInitialProps->绘制layout->执行子页面 getInitialProps->绘制子页面

特点支持:


  1. 强大的智能提示,基于umi本地生成缓存文件方案[详情]
  2. 自动导入antd和antd pro样式(暂时不是很完善)[详情]
  3. 配置式路由,支持lazy形式,组件形式,类型形式,组件形式使用[详情]
  4. request
  5. model
  6. access (层级权限,layout和子页面权限有层级关系,还可以单独设置页面跳过)[详情]
  7. appData(访问全局数据) [详情]
  8. history(基于react-dom-route v6,这玩意跳转有问题直接删掉了)
  9. getInitialProps(单页面预加载数据 sync/async) [详情]
  10. getInitialState(全局预加载数据 sync/async) [详情]
  11. vite原生插件支持
  12. 简单实现全局对象,因为式使用组件形式集成到vite里的,原结构不需要修改 [详情]
  13. 约定式路由(还没想好咋玩,暂时没加它)

开始使用:

准备:新建一个vite react-ts工程

准备:安装插件 (暂时测试了yarn,别的没测试)

yarn add vite-plugin-react-umi -D

1.修改vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { createUmi } from 'vite-plugin-react-umi';

// https://vitejs.dev/config/
export default defineConfig({
    plugins:[
        react(),
        createUmi({}),
    ],
});

2.新建一个umiConfig.tsx(跟vite.config.ts同目录)

import {defineUmi} from "vite-plugin-react-umi";
import {lazy} from "react";
import One from "./src/one";
import Entry from "./src/Entry";
import Two from "./src/two";

const App = lazy(() => import("./src/App"))

export default defineUmi({
    routes: [
        {
        path:'/',
        element:<Entry />,  //支持导入方式1
        }
        ,{
            path: '/user', 
            element: <App/>,   //支持导入方式3
            access:'test',   //此时所有子路由都需要test权限
            children: [
                {path:"/user",element:"404"},
                {path:"/user/one",element:One,},  //支持导入方式2
                {path:"/user/two",element:<Two />}
            ]
        }
    ]
})

3. 修改tsconfig.json(添加以提供强大的智能提示)

{
  "compilerOptions": {
        "paths": {
        "umi": ["./src/.umi"]
    }
  }
}

4. 修改src/main.tsx(简单的把UmiApp组件放进去就行了,可以设置很多属性)

import React from 'react'
import ReactDOM from 'react-dom'
import {UmiApp} from "umi";
ReactDOM.render(
    <React.StrictMode>
        <UmiApp />
    </React.StrictMode>,
    document.getElementById('root')
)

5.使用vite原生指令运行:vite

1.0.99

4 years ago

1.0.98

4 years ago

1.0.97

4 years ago

1.0.96

4 years ago

1.0.95

4 years ago

1.0.94

4 years ago

1.0.93

4 years ago

1.0.92

4 years ago

1.0.91

4 years ago

1.0.90

4 years ago

1.0.88

4 years ago

1.0.87

4 years ago

1.0.86

4 years ago

1.0.85

4 years ago

1.0.84

4 years ago

1.0.83

4 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.80

4 years ago

1.0.79

4 years ago

1.0.78

4 years ago

1.0.77

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.74

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.71

4 years ago

1.0.70

4 years ago

1.0.69

4 years ago

1.0.68

4 years ago

1.0.67

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.49

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.40

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago