Vue3.2环境从0开始搭建：vue3.2采用了pnpm进行项目的管理，

1、如果没有全局安装过pnpm，先全局安装pnpm

npm install pnpm -g

2、在项目目录D:\workspace\vue3\my-vue（可以是其它任何路径）下cmd运行

pnpm init -y

生成package.json文件

3、在my-vue文件夹下创建pnpm.workspace.yaml文件，输入以下内容

packages:
  - 'packages/*'

4、安装依赖

pnpm install @rollup/plugin-commonjs@18.0.0 @rollup/plugin-json@4.0.0 @rollup/plugin-node-resolve@11.2.1 execa@4.0.2 minimist@1.2.0 rollup@2.38.5 rollup-plugin-typescript2@0.27.2 typescript@4.2.2 -D -w

 -w意思是将依赖安装到项目的根目录下，作为packages下面其它项目共有的依赖

5、生成tsconfig.json文件

pnpm tsc --init

此时会在项目根目录下生成tsconfig.json文件，将tsconfig.json修改为如下内容：

{
    "compilerOptions": {
        "outDir": "dist", //输出的目录
        "sourceMap": true, //开启sourceMap
        "target": "es2016", //目标语法
        "module": "esnext", //模块格式
        "moduleResolution": "node", //模块解析方式
        "strict": true, //开启严格模式
        "resolveJsonModule": true, //解析json模块
        "esModuleInterop": true, //允许通过es6语法引入commonjs模块
        "jsx": "preserve", //jsx不转义
        "lib": [
            "esnext",
            "dom"
        ], //支持的类库 esnext及dom
    }
}

6、 packages目录下新建reactivity（响应式库）、shared（工具库）目录，分别在reactivity和shared目录下新建package.json文件、src目录、index.ts文件packages/reactivity/package.json内容如下：

{
    "name": "@vue/reactivity",
    "version": "1.0.0",
    "description": "@vue/reactivity",
    "main": "index.js",
    "module": "dist/reactivity.esm-bundler.js",
    "unpkg": "dist/reactivity.global.js",
    "buildOptions": {
        "name": "VueReactivity",//reactivity可以单独打包，打包成global时通过VueReactivity方式引入
        "formats": [
            "esm-bundler",
            "cjs",
            "global"
        ]
    }
}

 packages/shared/package.json内容如下：

{
    "name": "@vue/shared",
    "version": "1.0.0",
    "description": "internal utils shared across @vue packages",
    "main": "index.js",
    "module": "dist/shared.esm-bundler.js",
    "buildOptions": {//shared不会单独打包，所以没有global模式
        "formats": [
            "esm-bundler",
            "cjs"
        ]
    }
}

7、reactivity会依赖shared里面的文件，执行以下脚本将shared作为reactivity的依赖

pnpm install @vue/shared@workspace --filter @vue/reactivity

此时reactivity目录下会多出node_modules目录，如下图：

现在测试下reactivity是否能引用shared暴漏的方法，在shared/src/index.ts中暴露一个方法

export const isObject = (val: Record<any, any>) => {
	return val !== null && typeof val === 'object';
};

 在reactivity/src/index.ts中引入isObject方法

此时会报找不到模块，我们对项目根目录下的tsconfig.json做修改，增加baseUrl，paths配置，增加如下配置项：

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //以当前路径为基准进行查找
        "paths": {
            "@vue/*": [//以@vue/开头的依赖都去packages下去查找
                "packages/*/src"
            ]
        }
    }
}

此时项目根目录下的tsconfig.json完整内容为：

{
    "compilerOptions": {
        "outDir": "dist", //输出的目录
        "sourceMap": true, //开启sourceMap
        "target": "es2016", //目标语法
        "module": "esnext", //模块格式
        "moduleResolution": "node", //模块解析方式
        "strict": true, //开启严格模式
        "resolveJsonModule": true, //解析json模块
        "esModuleInterop": true, //允许通过es6语法引入commonjs模块
        "jsx": "preserve", //jsx不转义
        "lib": [
            "esnext",
            "dom"
        ], //支持的类库 esnext及dom
        "baseUrl": ".", //以当前路径为基准进行查找
        "paths": {
            "@vue/*": [//以@vue/开头的依赖都去packages下去查找
                "packages/*/src"
            ]
        }
    }
}

这样reactivity/src/index.ts引入isObject方法时就不会再报错了。

vue3的环境已经搭建至此已经从0搭建完了。