从零开始同时手撸 React 和 Vue 后台 01 —— 创建项目

为了对比 React 和 Vue 在相同项目上的开发体验，我决定从零开始同时手撸 React 和 Vue 后台

代码仓库会和本系列文章同时更新，欢迎 fork，感谢 star🌟

	React	Vue
仓库	github.com/Levix0501/l…	github.com/Levix0501/l…
预览	next-admin.fecoder.cn	vue-admin.fecoder.cn

技术栈

搭建项目之前，先大致罗列一下会用到的技术栈，后续会随着项目的推进补充。

	React	Vue
版本	18.3	3.4
元框架	Next.js 14	-
构建工具	Webpack	Vite
TypeScript	✅	✅
路由	Next.js App Router	Vue Router
状态管理	Zustand	Pinia
数据请求	ofetch	ofetch
Atomic CSS	Tailwind CSS	UnoCSS
主组件库	Ant Design	Element Plus
其他组件库（可能会用）	MUI/Radix UI	Vuetify

PS

1. 为什么使用 Next？想用
2. 为什么不使用 Nuxt？因为不太熟悉，以后有机会补上

创建项目

Nextjs 和 Vue 均提供了官方的项目脚手架工具，我们使用 pnpm 作为包管理器

项目命令及配置选项如下

Nextjs

文档：nextjs.org/docs/gettin…

pnpm create next-app

✔ What is your project named? levix-admin-nextjs
✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? No
✔ Would you like to use App Router? (recommended) Yes
✔ Would you like to customize the default import alias (@/*)? No

Vue

文档：cn.vuejs.org/guide/quick…

pnpm create vue@latest

✔ Project name: levix-admin-vue3
✔ Add TypeScript? Yes
✔ Add JSX Support? Yes
✔ Add Vue Router for Single Page Application development? Yes
✔ Add Pinia for state management? Yes
✔ Add Vitest for Unit Testing? No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? Yes
✔ Add Prettier for code formatting? Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) Yes

部分技术栈在使用命令行创建时已安装，剩下的包手动安装

状态管理

Nextjs

使用相较于 Redux 更为轻量便捷的 Zustand

文档：docs.pmnd.rs/zustand/get…

Vue

使用 Pinia，创建项目时已安装

文档：pinia.vuejs.org/

数据请求

使用 ofetch 作为客户端数据请求的工具，这是一个基于 fetch 封装的库

文档：github.com/unjs/ofetch

原子化 CSS

Nextjs 在创建项目时已集成了 Tailwind CSS，在 Vue 的项目中我想使用与 Tailwind 对标的 UnoCSS

其余配置参照官方文档：unocss.dev/integration…

主组件库

Nextjs

使用Ant Design

文档：ant-design.antgroup.com/docs/react/…

Vue

使用 Element Plus

文档：element-plus.org/zh-CN/guide…

目录树

Nextjs

levix-admin-nextjs     
├─ _core               // 核心代码
├─ app                        
├─ public                   
├─ zustand-store       // zustand
├─ LICENSE             
├─ README.md           
├─ next-env.d.ts       
├─ next.config.mjs     
├─ package.json        
├─ pnpm-lock.yaml      
├─ postcss.config.mjs  
├─ tailwind.config.ts  
└─ tsconfig.json       

Vue

levix-admin-vue3                   
├─ public                                          
├─ src                             
│  ├─ _core                        // 核心代码
│  │  └─ utils                     
│  │     └─ plugins.ts            // 自动注册插件
│  ├─ assets                                      
│  ├─ components             
│  ├─ plugins                      // 插件
│  │  ├─ router                    
│  │  │  └─ index.ts               
│  │  └─ pinia.ts                  
│  ├─ stores                       // pinia       
│  ├─ views                               
│  ├─ App.vue                      
│  └─ main.ts                      
├─ LICENSE                         
├─ README.md                       
├─ env.d.ts                        
├─ index.html                      
├─ package.json                    
├─ pnpm-lock.yaml                  
├─ tsconfig.app.json               
├─ tsconfig.json                   
├─ tsconfig.node.json              
├─ uno.config.ts                   
└─ vite.config.ts                  

结语

我们已经创建了项目并做了一些基础的准备工作

接下去，我们会实现主题以及基本色的切换

	React	Vue
仓库	github.com/Levix0501/l…	github.com/Levix0501/l…
预览	next-admin.fecoder.cn	vue-admin.fecoder.cn