提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境

H5 前端 开发
2023-03-14 22:57:30 时间

项目地址

源码：kaimo-cost-h5



环境准备

兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

我的 node 版本是 v12.13.0，npm 版本是 6.12.0。



1、初始化 Vite + React 项目


直接用官方提供的模板，一键生成项目：项目命名为 kaimo-cost-h5

# npm 6.x
npm init @vitejs/app kaimo-cost-h5 --template react


60a67103492f43e194031857fadaa52b.png


然后进入项目安装依赖，就可以启动服务了

cd kaimo-cost-h5
npm install
npm run dev


92e49945b3aa41e990c419658df244c0.png


2、添加 react-router-dom 路由


安装依赖

执行下面命令安装依赖

npm i react-router-dom -S

3aefcf845ed4416f9e2a565df4e2ab0f.png


添加页面组件

在项目 src 目录下新增 container 目录用于放置页面组件，再在 container 下新增两个目录分别是 Index 和 About。


80c8223c498f4a669dd94b434d73e365.png


About/index.jsx 添加如下内容：

import React from 'react'

export default function Index() {
  return <div>
    kaimo 的 about 页面
  </div>
}


Index/index.jsx 添加如下内容：

import React from 'react'

export default function Index() {
  return <div>
    kaimo 的 index 页面
  </div>
}


添加路由数组

新建 src/router/index.js 配置路由数组，添加如下内容：

import Index from '../container/Index'
import About from '../container/About'

const routes = [
  {
    path: "/",
    component: Index
  },
  {
    path: "/about",
    component: About
  }
];

export default routes


引入路由配置

修改 App.jsx 里的代码，引入路由配置，实现切换浏览器路径，显示相应的组件：

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

import routes from '../src/router'

function App() {
  return <BrowserRouter>
    <Routes>
      {
        routes.map(route => <Route key={route.path} path={route.path} element={<route.component />}></Route>)
      }
    </Routes>
  </BrowserRouter>
}

export default App


这里记得包裹一层 BrowserRouter，不然会报错 useRoutes() may be used only in the context of a <Router> component.

我们测试一下：

首先我们访问：http://localhost:3000/，没有问题


9dfd6243b390483c8371fbb0055e8a72.png


然后访问：http://localhost:3000/about，也没问题


80dbd5dd67b54196a9a6192fdb907665.png



3、添加 Zarm UI 组件库

安装依赖

npm install zarm -S


fcd3c6969dc54c9fb5af79e0ca326e33.png


使用

Zarm 快速上手


fee789a4835a4e7b9c55da930a9a349a.png

下面我们在 App.jsx 里添加代码：

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

import { ConfigProvider } from 'zarm';
import zhCN from 'zarm/lib/config-provider/locale/zh_CN';
import 'zarm/dist/zarm.css';

import routes from '../src/router'

function App() {
  return <BrowserRouter>
    <ConfigProvider locale={zhCN}>
      <Routes>
        {
          routes.map(route => <Route key={route.path} path={route.path} element={<route.component />}></Route>)
        }
      </Routes>
    </ConfigProvider>
  </BrowserRouter>
}

export default App


然后在 /container/Index/index.jsx 里添加按钮 Button 组件：

import React from 'react'

import { Button } from 'zarm';

export default function Index() {
  return <div>
    kaimo 的 index 页面

    <h3>
      按钮 Button 基本用法
    </h3>

    <Button>default</Button>
    <Button theme="primary">primary</Button>
  </div>
}


989e0593702746b2b670e3049ebd49a3.png



按需引入

我们执行 npm run build 打包时，发现 css 文件过于太大，有必要进行按需引入。

4b04efcdaacf4f03931a381c9366ad34.png


我们使用插件vite-plugin-style-import：按需导入组件库样式

注意：这里我们用 1.0.1 的版本，我试了一下 2.0.0 的发现报错。


7dd0729f74184ab5af4ba13a04ce5a18.png



npm i vite-plugin-style-import@1.0.1 -D


52014b6685b4483f979028e0240a7906.png


安装好之后，我们修改 vite.config.js

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

import styleImport from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    styleImport({
      libs: [
        {
          libraryName: 'zarm',
          esModule: true,
          resolveStyle: (name) => {
            return `zarm/es/${name}/style/css`;
          }
        }
      ]
    })
  ]
})


再修改 App.jsx 里，去掉样式全局引入

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

import { ConfigProvider } from 'zarm';

import routes from '../src/router'

function App() {
  return <BrowserRouter>
    <ConfigProvider>
      <Routes>
        {
          routes.map(route => <Route key={route.path} path={route.path} element={<route.component />}></Route>)
        }
      </Routes>
    </ConfigProvider>
  </BrowserRouter>
}

export default App


然后我们在打包 npm run build，我们发现 css 打包后的体积少了很多。

5c1c22882a0441beb73945c4e0b6935b.png





相关文章