# divue

**Repository Path**: geeksdidi/divue

## Basic Information

- **Project Name**: divue
- **Description**: 从零搭建一个vue3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-08
- **Last Updated**: 2024-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 生成配置信息搭建Monorepo环境


<b>什么是Monorepo？</b>
简单来说Monorepo 把所有项目的所有代码统一维护在一个单一的代码版本库中。vue3中使用pnpm来实现Monorepo

## 安装pnpm

* 全局安装pnpm

```
npm install pnpm -g 
```
* 初始化配置文件

有的vscode中可能执行pnpm脚本被禁止，在终端执
```
Set-ExecutionPolicy -Scope CurrentUser
```
然后提供参数值输入：RemoteSigned 即可

<b>注意：pnpm支持node版本为14.19，注意自己的node版本</b>


```
pnpm init
```

* 创建npmrc文件

## 搭建Monorepo环境

pnpm 中只需要配置一个pnpm-workspace.yaml即可

```
packages:
  - 'packages/*'

```
上面表示管理的包在packages文件下，所以需要新建packages文件夹，后续的模块包都放在这下面即可

## 安装所需依赖

* typescript
因为vue3是基于typescript开发的，所以需要安装typescript

* minimist
minimist是一个用于处理命令行调用node指令时，处理node之后的一系列参数的模块。后续会用到

* esbuild
 esbuild是一个类似webpack构建工具。它的构建速度是 webpack 的几十倍。开发环境通常用它来构建

 <b>统一安装</b>

 ```
pnpm install typescript minimist esbuild -w
 ```
 注意-w，需要将这些依赖安装在根目录下

 ## 填充packages

 在packages下分别新建reactivity和shared文件夹并在其文件夹下分别执行
 ```
 pnpm init
 ```
 修改两个文件下package.json名字为@xx/xxx形式 自定义参数buildOptions例如：

 ```
 {
  "name": "@divue/reactivity",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "buildOptions": {
    "name": "VueReactivity",
    "formats": [
      "esm",
      "cjs",
      "global"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 ```

 ## 本地包引用
如果想在shared引reactivity用可以
```
import {xx} from '@divue/reactivity'
```
此时直接引用会找不到@divue/shared；所以需要生成ts配置文件

根目录执行
```
pnpm tsc --init
```
生成tsconfig.json 进行别名配置(具体配置已经上传至git)

```
"paths": {
      "@divue/*": ["packages/*/src"]
    }
```
这样如果引入@divue/shared则会直接找到packages/shared/src中

<b>注意：此时还不能直接运行代码，需要打包构建才能运行</b>