# vue3-multiple-single

**Repository Path**: quqingfei/vue3-multiple-single

## Basic Information

- **Project Name**: vue3-multiple-single
- **Description**: vite+vue3 单页/多页/多项目共同兼容的脚手架, JS/TS随意混用, 也可用它代替微前端
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2025-05-07
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, 单页应用, 多页应用, 脚手架

## README

# 🎉  vue3-multiple-single 🎉 

vue3-multiple-single 是一个开箱即用的企业级脚手架，基于 vue3+vite，配备各种工程化工具。
单页应用+多页应用共存, 是一款不可多得的好脚手架项目！

## 为什么要用它：
* 解决多项目需要统一、共享通用组件
* 解决静态资源多项目共享问题
* 开发资源共享，依赖共享
* 兼容单页/多页（一个项目既一个页面）/也是工作空间/微前端
* 配置项统一，环境一致
* 可拓展性强，日后若单页拓展多页，多页拓展多项目,微前端都不在难以维护
* 统一入口，统一管理省心省力
* 若当作微前端使用, 则直接省去跨域问题
* JS/TS随意混合使用,即方便,也提效率

## 特性 🌼

- 支持命令行一键创建子项目，并且可选是否使用 ts（即使选了ts也能混用js不报错）
- 支持直接启动指定子项目 / 启动全部子项目
- 支持打包指定子项目 / 全量打包
- 打包后的 chunk，各子项目完全脱离解耦，降低风险
- 配置完善的工程化工具，包括 esint、prettier、stulelint、husky、lint-stage、commitlint
- 配置一些基本的插件，例如自动引入 Composition API、打包 size 分析工具、打包压缩工具
- 共享非编译静态文件目录static
- 非入侵式html
- 可作为多项目统一管理使用
- 构建后结构清晰：

![输入图片说明](static/lib/image.png)

## 1.项目结构 📖

```
├── README.md
├── .husky   // git hook钩子
│   ├── commit-msg // 规范 commit message 信息
│   └── verify-commit-msg.mjs  // 脚本：commitlint 替代方案
├── dist //打包输出目录
├── scripts //存放一些脚本
│   ├── template         // 创建子页面的js模版
│   ├── template-ts      // 创建子页面的ts模版
│   ├── build.cjs        // 全量打包的脚本
│   ├── index.mjs        // 创建子页面的脚本
├── static           // 非编译共享静态资源目录
├── src
│   ├── assets       // 公共静态编译资源
│   ├── components   // 公共共享组件
│   ├── store        // pinia 共享状态存储库
│   ├── utils        // 公共方法
│   └── Projects     // 项目文件夹(多页/单页)可同时存在
│       ├── pageone
│           ├── public // 自身项目非编译静态资源目录
│           └── index.html // 当前项目的入口 
│       ├── index.html         // 启动全部子项目的重定向导航页面,开发入口.
│       └── multiPages.json    // 所有子项目的集合, 创建子项目命令自动写入
├── types  //ts 声明文件
├── .env.development   // 开发环境-环境变量
├── .env.production    // 生产环境-环境变量
├── .eslintrc.cjs      // eslint 配置
├── .gitignore         // git 提交忽略文件
├── .prettierignore    // prettier 忽略文件
├── .prettierrc.js     // prettier 配置
├── .stylelintignore   // stylelint 忽略文件
├── .stylelintrc.js    // stylelint 配置
├── .pnpm-lock.yaml    // 锁定项目于一份各个依赖稳定的版本信息
├── .stats.html        // chunck size 分析页面,无需关心
├── tsconfig.json      // ts 配置
├── tsconfig.node.json // vite在node环境中的 ts 规则
├── vite.config.ts     // vite 配置
├── package.json       // 管理工具配置

```

## 2.如何使用 🔑

###  基本操作

```
  //全局安装 pnpm
  npm install -g pnpm
  //切换源(不切换也可)
  pnpm config set registry https://registry.npmmirror.com/

  pnpm install
```
安装husky，不然可能钩子不会生效(不安装也没影响,可以跳过)
```
./node_modules/.bin/husky install
```

###  启动

> 启动所有项目

```js
npm run dev
```

> 启动指定子项目

```
npm run dev --page=子项目文件夹名
例如： npm run dev --page=pageone
```

###  创建子项目

执行以下命令：

```js
// 创建使用js的子项目：
npm run new:page // 输入后回车, 就会提示让你输入"项目名称(英文):项目描述(随意)"

// 创建使用ts的子项目：
npm run new:page --ts // 输入后回车, 就会提示让你输入"页面/项目名称(英文):页面/项目描述(随意)"
```
执行命令后终端提示：请输入要生成的'页面名称:页面描述'、会生成在 /src/Project 目录下  
例如输入：mypage:我的页面 // 项目名称:项目描述 
输入页面信息回车确认后，会在 scripts/multiPages.json 中生成对应的数据，后期如果要删除页面/项目最好删除json内对应的数据,以保持一致

在`multiPages.json`页面中可以查看各个页面的功能，格式如下：

```js
;[
  { chunk: 'pageone', chunkName: '页面1' },
  { chunk: 'pagetwo', chunkName: '页面2' },
  { chunk: 'pagethree', chunkName: '页面3' }
]
```

###  打包

> **正式环境打包**

单个项目打包：

```js
npm run build --page=（页面或项目）名称(英文)既:Project目录下的项目
```

全量打包：

```js
npm run build:all
```

> **测试环境打包**

测试环境单页面打包：

```js
npm run build:test --page=（页面或项目）名称(英文)既:Project目录下的项目
```

测试环境全量打包：

```js
npm run build:all test
```
## 其他说明
若不想html内引入的资源被编译请给标签添加vite-ignore属性,详情:https://vitejs.cn/vite6-cn/guide/features.html#html
若要搞移动端请自行安装相关配置，且需要配置忽略其他项目
因为都用的统一的配置导致技术架构比较有局限性，只能使用vue3技术框架。

## 说在最后 💝

如果本脚手架对你有帮助，希望可以点个 star ⭐️⭐️⭐️ 谢谢 🌹🌹🌹
有问题就提issues