搭建一個 Vite 版 React 項目

Vite簡介

Vite (法語意為 "快速的"，發(fā)音 /vit/) 是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗，它主要由兩部分組成：

• 一個開發(fā)服務(wù)器，它利用 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。

• 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，預(yù)配置輸出高度優(yōu)化的靜態(tài)資源用于生產(chǎn)。

Vite 意在提供更開箱即用的配置，同時它的 插件 API 和 JavaScript API 帶來了高度的可擴展性，并完全支持類型化。

搭建一個vite版React項目

npm init @vitejs/app vite-react -- --template react

執(zhí)行完畢后，我們的目錄是這樣的

• 啟動

啟動之前需要yarn或者npm install

 npm run dev

• 啟動成功

引入react路由

• 安裝react-router-dom

 yarn add react-router-dom

• src 文件夾下

創(chuàng)建routes文件夾 并且創(chuàng)建index.jsx

創(chuàng)建views文件夾，并創(chuàng)建home/demo文件及文件夾 并且創(chuàng)建index.jsx

• src/routes/index.jsx

import React from 'react';
import { Route, Redirect, Switch } from 'react-router-dom';
import Demo from '../views/Demo/index';
import Home from '../views/Home/index';

const routerList = () => (
  <Switch>
    <Route path="/" render={() => <Redirect to="/home" />} exact key="first" />
    <Route path="/demo" component={Demo} key="demo" />
    <Route path="/home" component={Home} key="home" />
  </Switch>
);

export default routerList;

• App.js

import React from 'react';
 + import Routes from './routes';
 + import { BrowserRouter } from 'react-router-dom';

import './App.css';

function App() {
  return (
   + <BrowserRouter>
   +   <Routes />
   + </BrowserRouter>
  );
}

export default App;

引入stylus

• 安裝stylus

yarn add stylus

• 在目錄下 創(chuàng)建****.module.styl的文件夾

vite提供了內(nèi)置支持.scss，.sass，.less，.styl和.stylus文件。無需為其安裝Vite專用插件

• 在index.jsx里引入

您還可以通過.module在文件擴展名之前添加CSS模塊和預(yù)處理

import React, { useEffect, useState } from 'react';
+ import styles from './index.module.styl';

const Index = ({ history }) => {
 return (
   <>
    + <div className={styles.wrap}>
       this is home page
       <br />
       <button onClick={() => history.push('/home')}>跳轉(zhuǎn)到home</button>
       <button onClick={() => history.push('/demo')}>跳轉(zhuǎn)到demo</button>
     </div>
   </>
 );
};
export default Index;

引入rematch

• 安裝

yarn add @rematch/core

• 在src下創(chuàng)建store文件夾并創(chuàng)建index.js文件

import { init } from '@rematch/core';
import createLoadingPlugin from '@rematch/loading';

const demoStore = {
  state: {
    status: false,
  }, // initial state
  reducers: {
    result(state, payload) {
      return Object.assign({}, state, payload);
    },
  },
  effects: (dispatch) => ({}),
};

const loadingPlugin = createLoadingPlugin({ asNumber: true });

const configureStore = () =>
  init({
    plugins: [loadingPlugin],
    models: {
      demoStore,
    },
  });
export default configureStore;

-App.js

import React from 'react';
import Routes from './routes';
import { BrowserRouter } from 'react-router-dom';
+ import { Provider } from 'react-redux';
+ import store from './store/index';

import './App.css';

function App() {
  return (
   + <Provider store={store}>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    +</Provider>
  );
}

export default App;

推薦閱讀：

Vite 的插件機制：插件應(yīng)用和基本使用

Vite 功能概覽

Vite 2.0 原理解析

尤雨溪 3 天 10 更的 Vite 究竟有什么魔力？

尤雨溪是個惡魔，Vite 三天 10 更

更新不易，點個“在看”和“贊”吧(●'?'●)！