一、搭建vite和vue项目
1、vite安装（来自官网命令）
npm:
npm initvite@latestyarn:
yarn create vitepnpm:
pnpm create vite也可以通过以下命令直接设置项目名和框架
npm 6.x
npm initvite@latest my-vue-app --template vuenpm 7+:, extra double-dash is needed:
npm initvite@latest my-vue-app -- --template vueyarn
yarn create vite my-vue-app --template vue【vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录】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、运行
文章图片
文章图片
总结：momorepo这种一般用于同一架构多个项目的管理，用pnpm安装还是不太熟练，测试多次才成功，每次失败大多都是安装顺序有问题，测试了几次整理出能成功的顺序，下次搭建lerna yarn workspace
推荐阅读
- 为啥我用Vue.use(axios)报错了！（）
- ts 版 vue 之 vue-property-decorator
- vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（干货）
- 北京丨蓝湖丨产品设计协同平台丨诚招前端工程师 30K—50K
- Vue源码理解（一）
- 自定义指令实现渐进加载图片