一、项目结构的搭建

lxx418763

于 2024-08-20 22:42:33 发布

阅读量155

点赞数 4

分类专栏：组件库文章标签：前端

本文链接：https://blog.csdn.net/lxx418763/article/details/141370227

版权

组件库专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目结构概览

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

项目结构的搭建

创建项目文件夹 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      # 工具包，存放组件库的工具方法