vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录

一、搭建vite和vue项目

1、vite安装（来自官网命令）
npm:

npm init  vite@latest

yarn:

yarn create vite

pnpm:

pnpm create vite

也可以通过以下命令直接设置项目名和框架
npm 6.x

npm init  vite@latest my-vue-app --template vue

npm 7+:, extra double-dash is needed:

npm init  vite@latest my-vue-app -- --template vue

yarn

yarn create vite my-vue-app --template vue

pnpm

pnpm create vite my-vue-app -- --template vue

二、pnpm 构建motorepo

1、添加pnpm-workspace.yaml文件，内容如下：

packages:
  -'packages/**'

2、install

3、新建packages目录，把src目录、vite.config.js和index.html移到packages文件夹下改名main，然后在packages下创建api目录，

4、在main、api目录下分别pnpm init -f生成package.json

name分别为：@momovue/main、@momovue/api

如果想添加公共框架包直接在根目录执行pnpm install module_name 

4、api项目单独添加框架，并且添加index.ts测试文件

pnpm i typescript -D --filter @momovue/api

5、main安装api依赖

pnpm i @momovue/api --filter @momovue/main

6、测试调用api的方法

7、运行

8、项目发布

最后把打包后dist里的文件放到nginx目录，启动nginx

总结：momorepo这种一般用于同一架构多个项目的管理，用pnpm安装还是不太熟练，测试多次才成功，每次失败大多都是安装顺序有问题，测试了几次整理出能成功的顺序记录下，下次搭建lerna yarn workspace