yarn create vite// 初始化 (根据提示,确定项目名称、选择框架react、选择react还是react-ts ) cd项目名称// 进入项目根目录 yarn// 安装依赖包 yarn dev// 运行 注释:项目初始化后src中的目录很简单,自己可以按照自己的风格设置子目录结构,例如下面: 二、配置 打开根目录,参考vite官网,进行配置文件vite.config....
Vite是一个基于浏览器原生ES imports的开发服务器,利用浏览器去解析 imports,在服务器端按需编译返回,相比webpack,完全省去了打包这个过程,所以编译起来非常迅速,也不会随着项目模块增多而变慢。关于Vite的详细介绍,网上已经有很多相关内容了,本次分享主要聚焦如何使用Vite搭建React+Antd工程。
一、创建项目 首先参考 Vite 的文档创建一个项目 yarn create vite my-packages --template react-ts // 这里的 my-packages 是项目名称,按需修改 生成的项目如下: 结构很简单,但对于一个组件库来说,还需要完善 首先是 package.json, 需要将 dependencies 中的基础库移到peerDependencies和 devDependencies 中: "d...
之前我们是借助了 webpack + TypeScript 做了一套用于开发 React 组件的脚手架套件,当开发者要组件开发时,即可直接使用脚手架初始化对应项目结构进行开发。 虽然主路径上确实解决了组件开发中所遇到的组件无图无真相、组件参数文档缺失、组件用法文档缺失、组件 Demo 缺失、组件无法索引、组件产物不规范等内部组件管理...
1、初始化 Vite + React 项目 直接用官方提供的模板,一键生成项目:项目命名为 kaimo-cost-h5 # npm 6.x npm 1. 2. 然后进入项目安装依赖,就可以启动服务了 cdkaimo-cost-h5 npminstall npm 1. 2. 3. 2、添加 react-router-dom 路由 ...
本文主要记录整个项目的搭建过程。 脚手架 直接用vite官方文档提供的命令来初始化整个项目,框架选择 React ,加上 ts 类型提示。整个过程没有踩到坑,很顺畅。 组件库 组件库使用字节开源的arco-design。原因是以前一直用的arco-desigin,对它比较熟悉 (提过PR),而且 oncall 也能及时响应。
通常在使用 React 构建新项目时，建议从 create-react-app 开始。 但是现在有了 Vite，您可以轻松地从头开始做一个新项目，因为 Vite 的配置非常简单。打开终端并创建一个新目录：mkdir react-vite-example 在该目录中移动：cd react-vite-example 初始化 npm 项目：npm init -y 运行命令后，您应该在新创建的...
使用Vite 启动 React 项目的步骤: 1. 导航到要创建项目的目录: 使用终端中的 cd 命令导航到要创建项目的目录。例如: 2. 创建一个 React 项目: 在...
用脚手架搭建好 vite-react 项目 复制 yarncreate@vitejs/app my-react-app--template reactyarn link viteyarn dev 1. 2. 3. 加上node 浏览器端调试 script 复制 "debug":"node --inspect-brk node_modules/vite/dist/node/cli.js" 1. 启动服务,可以看到 ...