vue3.0的 monorepo

xuyanhua1127

已于 2023-06-24 16:06:57 修改

阅读量945

点赞数

分类专栏： js html 文章标签： node.js vue.js typescript

于 2023-06-23 20:34:24 首次发布

本文链接：https://blog.csdn.net/xuyanhua1127/article/details/131349084

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用pnpm安装和创建Vite工程，配置pnpm-workspace.yaml文件，以及进行模块的组织和依赖管理。在工程中，创建了main和api两个模块，并分别配置package.json，使用typescript。同时，演示了如何在不同模块中安装和引用依赖，以及进行基本的模块测试。

摘要由CSDN通过智能技术生成

一、安装pnpm

npm i pnpm -g

二、创建vite工程

npm init vite@latest

三、在工程的根目录，创建packages文件夹和pnpm-workspace.yaml文件

四、编辑pnpm-workspace.yaml:

packages:
  -'packages/**'

五、vite.config.js和index.html移到src文件夹下、然后把src移动到pakages下面，并把src改名为main

六、在packages下面新建文件夹api、并且分别在api和main目录下执行pnpm init 生成package.json

七、把package.json的name分别改成为：@momovue/main、@momovue/api

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

八、install 在根目录安装

九、在api项目下单独安装框架

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

1、报错：

No projects matched the filters in "D:\vue3\new4\momovue"

修改：

packages:

- 'packages/**'

“-”之间和后边的后面单引号之间的字母有空格。如下图：

十、在api目录下添加index.ts,修改package.json的main的值为index.ts

十一、main安装依赖

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

1、修改package.json的"main"的值为main.ts

2、修改 <script type="module" src=""></script>的src为main.ts

十二、修改main的package.json 在main里边安装插件 pnpm install

十三、测试：

在api的index.ts里边新建一个Person

export class Person{
    name:string;
    sex:string;
    age:number;

    constructor(name:string,sex:string,age:number) {
        this.name=name;
        this.sex=sex;
        this.age=age;

    }

}