项目结构概览
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 # 工具包，存放组件库的工具方法
