项目结构概览
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://i-blog.csdnimg.cn/direct/360b41e2fbdd4017b3ba84a3b57d472d.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/*'
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"jsxImportSource": "vue",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"packages/**/*.ts",
"packages/**/*.tsx",
"packages/**/*.vue"
]
}
packages
- components # 组件包,存放开发的组件
- core # 核心包,存放组件库的核心
- docs # 文档包,存放用于生成组件库的配置
- hooks # 钩子包,存放通用函数
- play # 演示包,存放演示使用组件的包
- theme # 主题包,存放组件库的样式
- utils # 工具包,存放组件库的工具方法