完美接入antd ⚡️ 封装路由渲染 ✨ 基于路由的代码分割 导出为纯静态应用 使用@ant-design/pro-layout布局 缘起 偶然看到尤雨溪大佬发了微博说到Vite 2.0发布了,而且官方提供了 React 的项目模板,这让向来喜欢搞事儿的我欣喜若狂,当即上车体验了一下,效果拔群,不愧是"下一代前端开发与构建工具" 下面聊聊我...
上面我们用了antd pro创建了一个react项目,看似很美好简单,但其实存在以下的问题(个人观点) 集成了dva,基于 redux 和 redux-saga 的数据流方案,dva 还额外内置了react-router和 fetch 项目代码的配置、插件、组件过于繁琐 就好比下载一个360软件,你电脑上就会多出n个软件的感觉 采用webpack打包,虽说umi3.5采用mfsu...
AntdvPro是一个基于Vue3、Vite4、ant-design-vue4、Pinia、UnoCSS和Typescript的一整套企业级中后台前端/设计解决方案,它参考了阿里react版本antd-pro的设计模式,使用了最新最流行的前端技术栈,内置了动态路由、多主题、多布局等功能,可以帮助你快速搭建企业级中后台产品原型。 特性 pnpm:使用了最新的pnpm作为包管理...
1. 创建最基础的脚手架 npm create vite@latest my-react-app -- --template react 使用 cd my-react-app进入到该目录。 查看目录结构。 2. 进入目录， 安装依赖 这里可以看到目录的结构， 先不做任何的操作， 直接使用 npm install直接安装对应的依赖。 3. 加入 antd 的最新依赖包 npm install --save an...
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: { /...
React+antd-mobile+vite 尚未实现同一页面缓存可无限跳转自身,并且加载新数据,返回又缓存跳转之前的页面数据的功能(vue项目已实现) 项目地址 脚手架搭建的dome(vue+vite、react+vite、vue+farm、react+farm、vue+rsbuild、react+rsbuild) 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:{// 支持内联...
由于我之前学过React框架,但是由于工作中没有使用它,所以我最近开始使用了Vite、TypeScript、React Router,Redux,Axios,Ant Design和SpringBoot等流行技术来搭建了一个博客项目来巩固我的学习成果。这个项目包括了博客文章列表、文章详情、标签分类、搜索功能等常用功能
yarn add antd 1. 完整引入 App.jsx 使用.less是为了方便设置主题色 import 'antd/dist/antd.less' 1. vite.config.js设置主题色 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' ...
支持React、JSX语法 支持ES6语法 支持Less module 支持Eslint、Prettier、Pre-commit hook 支持HMR快速热更新 支持Antd按需引入与主题样式覆盖 支持Proxy代理、alias别名 兼容传统浏览器 开发启动速度要够快,以秒计算 支持懒加载和chunk分割 介绍 前置条件之一