新建项目

使用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.ts
    packages.json
    tsconfig.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>