最近在使用Vite+React来结合实现一个WebIde的功能,顺便记录一下,如何通过Vite+react来搭建一个开发的项目。

首先,通过Vite官网的命令创建一个React项目。执行下面的命令,然后挑选React项目即可。

yarn create vite

第二步:去除基础模板内多余的内容,如CSS、多余的图标这些,保证纯粹性。

第三步:安装Redux+React-router,用于实现路由跳转和内存缓存功能

第四步:创建基础文件夹:assets(存放静态资源,如图片、图标等)、components(存放公有组件)、utils(存放公有函数)、layout(存放布局模板)、pages(存放业务级的代码)等

第五步:去iconfont上建个项目,并引入在线链接至index.html中,用于实现图标功能

第六步:配置@符号,可参考另一篇文章,这里不做详细展开:http://blog.51weblove.com/437.html

第七步:安装Sass或者其他CSS处理库

这样,基本一个React+Vite的仓库就成型了,再根据自己的需求进行一定的扩展即可实现一个项目。