1. 创建最基础的脚手架 npm create vite@latest my-react-app -- --template react 使用 cd my-react-app进入到该目录。 查看目录结构。 2. 进入目录， 安装依赖 这里可以看到目录的结构， 先不做任何的操作， 直接使用 npm install直接安装对应的依赖。 3. 加入 antd 的最新依赖包 npm install --save an...
Vite是一个基于浏览器原生ES imports的开发服务器,利用浏览器去解析 imports,在服务器端按需编译返回,相比webpack,完全省去了打包这个过程,所以编译起来非常迅速,也不会随着项目模块增多而变慢。关于Vite的详细介绍,网上已经有很多相关内容了,本次分享主要聚焦如何使用Vite搭建React+Antd工程。
通过这个模板,开发者可以迅速搭建起一个功能完备、可扩展性强的后台管理系统,没有使用create-rect-app脚手架,完全从0开始自己搭建,使用了目前比较先进的技术。 技术栈: react+redux+hook+vite+antd+less+axios 基于vite构建,本地开发体验很不错 非服务端渲染,仿antd-pro外观,但没有使用dva和roadhog 目录结构: 项...
#yarn add react-router-dom @types/react-router-dom安装Ant Design 1 2 npm install antd yarn add antd配置React Router 现在,我们已经安装了React Router,可以开始配置路由了。在src目录下创建一个新的文件夹,名为“pages”。在pages文件夹中创建两个新的文件,名为“Home.tsx”和“About.tsx”。这些文件将...
要快速搭建一个React项目,并整合React Router、Redux、Axios、Antd和Tailwind CSS,可以按照以下步骤进行操作: 使用vite创建React项目 使用vite是快速创建React项目的好方法。确保您已经安装了Node.js和npm或yarn。然后在终端中输入以下命令来创建一个新的React项目: ...
yarn add react-router-dom @types/react-router-dom 4. 安装Ant Design 最后,我们需要安装Ant Design。可以使用以下命令来安装Ant Design: 代码语言:bash 复制 npm install antd 或者 代码语言:bash 复制 yarn add antd 5. 配置React Router 现在,我们已经安装了React Router,可以开始配置路由了。在src目录下创建...
vite4+react+antd需要注意的地方,本地svg单 一、less、css、sass不生效问题。 方案1 less或者css,sass需要用到模块化的话,后缀名全部要加上《module》如*.module.less。否则不会生效 import styles from './index.module.less'; 生效。 vite.config.ts添加css和less css: { //* css模块化 modules: { /...
Astro:适用于静态生成的 React 应用。 Vite Vite 是一款现代的Java构建工具,旨在简化前端开发流程,实现快速的开发体验和热更新功能。作为 create-react-app(CRA)的理想替代方案, Vite 的设计理念是不在功能层面对React产生干扰,让开发者能够更专注于 React 本身,而非框架的限制。
# 使用 yarn 创建 React + TypeScript 模板的项目 my-vite-app yarn create @vitejs/app my-vite-app --template react-ts 安装Antd 安装 # 安装 antd yarn add antd # 安装 less yarn add -D less 配置 // vite.config.tsexportdefaultdefineConfig({...css:{preprocessorOptions:{less:{// 支持内联...
Vite+Antd+tailwind初始化项目 使用vite创建项目 首先选择一个文件夹 进入命令窗口 使用vite创建项目 npmcreatevite@latest 初始化项目后 进入项目安装依赖 npminstall 运行 npmrundev 使用Ant Design组件 安装 npm install antd--save 直接使用 组件汉化 在main.jsx中 ...