写在开头

包含内容

monorepo搭建过程
vite初始化项目
路由配置
可能会有（部分共用组件分装）

目的

记录下monorepo管理模式和vue3相关技术栈的使用，后续完成度可能到一个后台管理的初步模板

章节

monorepo搭建和vite初始化项目
路由搭建和pinia使用
一些组件封装吧（可能不会有

正文

monorepo

百度很多解释，这边只讲我理解的作用

依赖包管理方便。场景：一个项目多个平台或者后台为node.js。
痛点：如果为每个平台创建一个git项目，开发者就需要拉多个git，然后装两次依赖，git提交两次等问题。
优势： monorepo结构下，多平台放在一个git项目下，依赖引用同一个，比如vue3，ts，antd只要装一遍。
多平台公共方法和组件合并管理。场景：一个项目多个平台或者后台为node.js。
痛点：如果两个平台的一些共用js方法，或者一些组件可以复用，两个git下需要复制粘贴两份代码，且修改时候也是改两个地方。
优势：monorepo结构下，包下面不同项目可以相互依赖，复用相同的文件。

搭建工具

这边使用pnpm，优缺点不做分析。

初始化pnpm和项目文件

pnpm init

初始化package.json

新建一个pnpm-workspace.yaml文件，文件内容如下：

packages:
  - 'packages/**'

并创建一个packages文件夹，后续平台项目全都放在packages下

此时的文件夹结构为

.
├── package.json
├── packages
└── pnpm-workspace.yaml

使用vite初始化两个平台

进入packages文件夹下使用vite创建两个项目，一个名为project1,一个名为project2

pnpm create vite

查看project1/package.json，所需依赖如下

  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue-tsc": "^0.34.7"
  }

在project2中也是如此，我们把这个依赖复制到顶层的package.json，然后删除project1和2下package.json中的依赖。然后使用pnpm去安装所有依赖

pnpm i

可以发现project1和2下是没有node_modules的，node_modules只存在顶层中。

PS：

顶层中使用pnpm i vue 可以给所有项目装vue
给一个项目装独有的依赖可以进入packages/project1下使用pnpm i vue来安装

配置scripts

目前启动project1和2都需要进入到 packages/* 下输入npm run vite比较麻烦。

  "scripts": {
    "project1:dev": "pnpm -C ./packages/project1 dev",
    "project2:dev": "pnpm -C ./packages/project2 dev",
    "dev": "pnpm -F @test/one -F @test/two dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

其中，pnpm可以使用--filter或者-F来选择指定包，@test/one和two代表的是project1和2下package.json中的name属性，我把他们分别改成了@test/one和two。

此时，可以使用npm run project1:dev来启动project1或者npm run dev来同时启动两个平台。

结束

gitee地址这是build分支，会一直保存为这篇文章的结束状态。master分支会一直推进到结束

此时的项目结构

.
├── package.json
├── packages
│   ├── project1
│   │   ├── README.md
│   │   ├── index.html
│   │   ├── package.json
│   │   ├── public
│   │   │   └── favicon.ico
│   │   ├── src
│   │   │   ├── App.vue
│   │   │   ├── assets
│   │   │   │   └── logo.png
│   │   │   ├── components
│   │   │   │   └── HelloWorld.vue
│   │   │   ├── env.d.ts
│   │   │   └── main.ts
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   └── vite.config.ts
│   └── project2
│       ├── README.md
│       ├── index.html
│       ├── package.json
│       ├── public
│       │   └── favicon.ico
│       ├── src
│       │   ├── App.vue
│       │   ├── assets
│       │   │   └── logo.png
│       │   ├── components
│       │   │   └── HelloWorld.vue
│       │   ├── env.d.ts
│       │   └── main.ts
│       ├── tsconfig.json
│       ├── tsconfig.node.json
│       └── vite.config.ts
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

Monorepo项目管理，vue3+ts+antd+pinia后台管理模板搭建记录（一）