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

vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第1张图片

二、pnpm 构建motorepo

1、添加pnpm-workspace.yaml文件,内容如下:

packages:
  -'packages/**'

2、install
vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第2张图片
3、新建packages目录,把src目录、vite.config.js和index.html移到packages文件夹下改名main,然后在packages下创建api目录,
vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第3张图片
4、在main、api目录下分别pnpm init -f生成package.json

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

vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第4张图片

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

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

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

vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第5张图片

5、main安装api依赖

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

vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第6张图片

6、测试调用api的方法
vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第7张图片

vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第8张图片

7、运行
vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第9张图片

vite+vue3+typescript+pnpm-workspace-monorepo 项目搭建记录_第10张图片

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

你可能感兴趣的:(vue.js前端)