Skip to content

初始化项目根目录

pnpm init

在package.json里加一行 "private": true 加这个为防止我们意外地将私有项目发布

json
{ 
    "name": "monorepo",
    "version": "1.0.0",
    "description": "", 
    "main": "index.js", 
    "private": true, 
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  
    }, 
    "keywords": [],
    "author": "",
    "license": "ISC"
}

按照 pnpm 官网指导在根目录创建 pnpm-workspace.yaml 文件

yaml
packages:  
  # 放置各种项目  
  - 'packages/*'  
  # 放置各种公用代码  
  - '_public_/**'

初始化目录

Public > components

Public > utils

_public_ 文件夹下的模块初始化,添加一下 "private": truename 字段修改成自定义名称

同上步骤修改 utils

2.5:新建 index.js

components & utils 目录下新建 index.js 文件

这里要注意,如果是用 ts 请创建 index.ts 文件对应修改package.json 的mian

这时候需要思考一个问题,componentsutils 的定位。对于组件我们需要模板,而工具库我们是不需要的。所以需要对 components 进行 git 初始化,

在该目录下新建一个组件文件夹 components

执行命令 pnpm i vue ant-design-vue loading

pnpm i vue ant-design-vue lodash-es

同时新建两个组件 button.vue & switch.vue 文件

components/index.js 中导出两个组件

import Button from './components/button.vue'  
import Switch from './components/switch.vue'  
export {  
    Button,  
    Switch  
}

utils 里新建一个工具函数 fun.js

// 调用弹框提示  
export const windowAlert = (str) => {  
    console.log(str)  
}  
export const add = (a, b) => {  
    console.log(`相加的结果为:${a+b}`)  
}

index.js 中引入 fun.js

export * from './fun.js'

2.6:创建子项目

packages 里创建项目 demo1

执行 pnpm create vite 然后按照提示选择自己想要创建的项目

同理创建 demo2

2.7:安装公用组件、工具

如果要安装到根项目中(即全局项目中)那么可以在指令后面加上 -w

执行命令: pnpm i lu-components lu-utils -w

项目vite 3.0解析有问题

升级

"@vitejs/plugin-vue": "^5.0.4",

​ "typescript": "^5.2.2",

​ "vite": "^5.2.0",

​ "vue-tsc": "^2.0.6"

Lucking