使用pnpm、monorepo 来构建 vue + 独立组件库项目

新建项目

使用pnpm 进行安装

pnpm create vue@latest

在根目录下创建pnpm-workerspace.yaml文件

packages:- 'components/**'

此处，components为根目录中的components文件夹，他是独立于我们项目的一个组件库，不包含在src内，此时目录结构如下：
root
- components
- node_modules
- src
- packages.json
- pnpm-lock.yaml
- pnpm-workspace.yaml
- .....

进入components文件夹下，创建一个组件包，以editor为例：

mkdir editor
cd editor
pnpm init

修改package.json中的内容如下：

{"name": "@fa/editor","version": "1.0.0","main": "./src/index.ts","private": true
}

如果使用的组件为ts/tsx的，需要创建tsconfig.json文件，内容如下：

{"compilerOptions": {"target": "ESNext","jsx": "preserve","jsxImportSource": "vue","lib": ["DOM", "ESNext"],"baseUrl": ".","module": "ESNext","moduleResolution": "node","resolveJsonModule": true,"types": ["node"],"strict": true,"strictNullChecks": true,"noUnusedLocals": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"forceConsistentCasingInFileNames": true},"include": ["src/**/*"],"exclude": ["node_modules", "dist"]
}

此时，在editor组件中创建src目录，并，目录结构如下

 components- editor- src- editor.tsx- index.tspackages.jsontsconfig.json

其中，editor.tsx为组件本体， 例子如下：

import { defineComponent } from 'vue'export const FEditor = defineComponent({name: 'f-editor',setup() {return () => <div>f-editor</div>}
})

index.ts内容如下:

export * from './editor'

最后，就可以在工程中调用这个组件

<template><div><FEditor /></div>
</template><script setup lang="ts">
import { FEditor } from '@fa/editor'
</script><style scoped></style>