当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 01:42:10 HTML

一、搭建vite和vue项目1、vite安装(官网命令)npm:npminitvite@latestyarn:yarncreatevitepnpm:pnpmcreatevite也可以直接设置项目名和框架npm6.xnpminitvite@latestmy-vue-app--templatevuenpm7+:,需要额外的双破折号:npminitvite@latestmy-vue-app----templatevueyarnyarncreatevitemy-vue-app--templatevuepnpmpnpmcreatevitemy-vue-app----templatevue2.pnpmbuildmotorepo1,添加pnpm-workspace.yaml文件,内容如下:packages:-'packages/**'2、install3,新建packages目录,将src目录,vite.config中的.js和index.html移动到packages文件夹下重命名为main,然后在packages下创建api目录,4.在main和api目录下pnpminit-f生成package.jsonname分别是:@momovue/main,@momovue/api如果要添加公共框架包,直接在根目录下执行pnpminstallmodule_name4.添加框架单独工作到api工程,添加index.ts测试文件pnpmitypescript-D--filter@momovue/api5,主要安装api依赖pnpmi@momovue/api--filter@momovue/main6.测试调用api的方法7.运行8.发布项目最后将打包后的dist中的文件放入nginx目录,启动nginx总结:momorepo一般用于同一个架构,用于多个项目的管理,我是还是不太熟练使用pnpm安装。需要多次测试才能成功。大多数失败是由于安装顺序的问题。经过多次测试,整理出成功的序列并记录下来。下次我会建立一个lernayarnworkspace

猜你喜欢