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

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

项目地址

源码: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 下新增两个目录分别是 IndexAbout


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





目录
相关文章
|
25天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
64 9
|
2月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
2月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
149 1
引领前端未来:React 19的重大更新与实战指南🚀
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
74 10
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
49 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
1月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
55 5
|
1月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
55 2
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
32 2