从0开始搭建基于React和Vite的移动端模板

集成 postcss-mobile-forever

下载依赖

pnpm install postcss postcss-loader postcss-mobile-forever

vite 配置支持

...
import viewport from 'postcss-mobile-forever'

// https://vite.dev/config/
export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        viewport({
          appSelector: '#root',
          viewportWidth: 375,
          maxDisplayWidth: 600,
          border: true,
          rootContainingBlockSelectorList: [],
        })
      ]
    }
  }
})

集成React-Router6

/router/index.tsx

import { createBrowserRouter, type RouteObject } from "react-router-dom";
import BaseLayout from "../layout/BaseLayout";

const routes: RouteObject[] = [
      {
        path: "login",
        lazy: async () => ({
          Component: (await import("../pages/Login")).default,
        }),
      },
  {
    path: "/",
    lazy: async () => ({
      Component: BaseLayout,
    }),
    children: [
      {
        path: "home",
        lazy: async () => ({
          Component: (await import("../pages/Home")).default,
        }),
      },
    ],
  },
];

export const router = createBrowserRouter(routes, {
  basename: import.meta.env.VITE_APP_BASE_URL,
});

App.tsx

import './App.css'
import { router } from './router'
import { RouterProvider } from 'react-router-dom'

function App() {

  return <RouterProvider router={router} fallbackElement={<div>Loading...</div>}></RouterProvider>
}

export default App