一个高效的前后端集成框架,基于Vite、Vue、Webpack和Node.js。一键启动,开箱即用。
An efficient front-end and back-end integration framework based on Vite, Vue, Webpack, and Node.js. One click start, ready to use out of the box.
- 2024-04-18
重大更新
- 采用monoRepo框架来重构
- 前端在
packages/client
中,并采用Vite重构,更快,依赖更简单 - 服务端在
packages/server
中,升级了express,更高效,更易维护
- 2022-05-27
- 添加TypeScript支持,并新建typescript分支
- 2022-04-06
- 添加element-plus支持
- 修复已知Bug
- 2021-11-17
- 升级Webpack,从Webpack4升级到最新的Webpack5
- 调整打包逻辑,移除老代码
- 更新依赖包,到最新版本
- 切换到Vue3.0,欢迎大家尝鲜。
- 安装依赖(也可以安装 lerna 来管理多个包,这里为了方便,直接安装所有包的依赖)
# 在项目根目录运行
pnpm install
- 安装MongoDB
- MongoDB 预编译二进制包下载地址:https://www.mongodb.com/download-center/community
-
基本运行项目
3.0 一次性启动前后端
# 在项目根目录运行 pnpm start
3.1 启动服务端
cd packages/server npm run server
3.2 启动前端
cd packages/client npm run start
-
发布
cd packages/client
npm run build
此时会执行webpack的构建,目标文件会放到public目录
--- /project
-------- /packages
// monorepo包管理
-------------- /client
-------------------- /assets
// 资源文件目录,存放图片、样式、字体等
-------------------- /common
// 公共脚本,存放一些工具函数,工具类
-------------------- /components
// 存放抽象后的公司Vue组件
-------------------- /modules
// 主要页面逻辑以模块的形式分开
-------------------------------- /home
// 页面,一个页面一个目录
-------------------------------- /detail
// 页面,一个页面一个目录
-------------------- /main.js
// 项目中的主函数
-------------------- /routers.js
// 项目路由
-------------- /server
-------------------- /config
// 服务端的一些配置文件
-------------------- /handler
// 处理前端的请求
-------------------- /middleware
// 中间件
-------------------- /mock
// 本地Mock数据
-------------------- /router
// 路由
-------------------- /service
// 对Handler的进一步封装
因为是新的版本,所以要求Node.js更新到版本20及以上。可以用Nvm来进行Node.js多版本管理。