一、项目结构的搭建

项目结构概览

image.png

项目结构的搭建

• 创建项目文件夹 mkdir lxx-ui
• 初始化 git，让 git 管理项目 git init
• 使用 pnpm 初始化项目 pnpm init生成 package.json 文件，并安装相关依赖

{
  "name": "lxx-ui",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
}

• 创建 pnpm-workspace.yaml 文件，用来管理多个包，packages 目录里包含多个包

packages:
  - 'packages/*'

• 新建 ts 配置文件 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxImportSource": "vue",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "packages/**/*.ts",
    "packages/**/*.tsx",
    "packages/**/*.vue"
  ]
}

• 在根目录下创建多包目录

packages
    - components # 组件包，存放开发的组件
    - core       # 核心包，存放组件库的核心
    - docs       # 文档包，存放用于生成组件库的配置
    - hooks      # 钩子包，存放通用函数
    - play       # 演示包，存放演示使用组件的包
    - theme      # 主题包，存放组件库的样式
    - utils      # 工具包，存放组件库的工具方法