组件库开发

组件库开发

环境搭建

menorepo

• pnpm
• pnpm-workspace
• lerna 7.4.2 （已全局安装lerna）

1、初始化

1.1 新建项目目录root

1.2 在目录root中使用pnpm初始化packages.json文件，新建 pnpm-workspace.yaml文件， packages/文件夹

pnpm-workspace.yaml有这个文件表示开启工作区。

文件内容如下：

// root/pnpm-workspace.yamlpackages:- "packages/*"

// root/lerna.json{"version": "0.0.0","npmClient": "pnpm"
}

1.3 在root/packages/文件夹中新增子项目，使用lerna create <button>创建button子项目。

​ 或直接新建对应文件夹以及其中的文件…

使用lerna create <button>创建的button子项目内容如下

root/||packages/||button/|__test__/  测试文件存放|src/  项目代码|index.vue|index.js 入口文件|packages.json|READEME.md

root/ packages/ button/ src/ index.vue 文件写入内容

<template><h1>this button component 123</h1>
</template><script>
export default {name: 'ls-button',setup() {}
}
</script>

root/ packages/ button/ index.js 文件写入内容

import Button from './src/index.vue'Button.install = function (app) {app.component(Button.name, Button)
}export default Button

导出该项目中的各组件。

root/ packages/ button/ packages.json 文件写入内容

{"name": "@liindata/ls-button",  // 注意这里的名字，下边要用的"version": "0.0.0","description": "> TODO: description","author": "zhangxm <zxumei.com>","homepage": "","license": "ISC","main": "index.js","directories": {"lib": "src","test": "__tests__"},"files": ["src"],"scripts": {"test": "node ./__tests__/button.test.js"}
}

1.4 新建 root/play/文件夹。这里用来启动服务，来测试组件或在这里编写组件库的示例文档等等等等

这里使用 vite 来配置开发环境

root/play/|src/|App.vue|main.js|index.html|vite.config.js 

root/ play/ src/ App.vue 文件写入内容

<template><h1>monorepo demo 1</h1><lsbutton></lsbutton>
</template>
<script setup>import Lsbutton from '@liindata/ls-button' // 这里引入我的</script>

root/ play/ main.js 文件写入内容

import {createApp} from 'vue'
import App from './App.vue'const app = createApp(App)app.mount('#app')

root/ play/ vite.config.js 文件写入内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()]
})

这时候准备工作已经ok！

2、依赖安装

经过第一步，肯定有很多疑问，比如使用了 vue、vite 但没有引入。

这里建议思考一下都要安装那些依赖，以及如何启动vite

2.1 安装依赖

安装 vite 
pnpm add vite -w
pnpm add @vitejs/plugin-vue -w -D
安装 vue
pnpm add vue -w

进入root/packages/button/中 执行命令, 把button 包软链到根目录。以便其它包使用…

pnpm link --dit ../../

执行后，在根目录 root/package.json 中

会自动添加 "@liindata/ls-button": "link:D:/work/liindata-ui-pnpm/packages/button"

完整内容如下。

{"name": "@liindata/root","scripts": {"play": "vite serve ./play" 这里配置root/play 为根目录启动vite},"dependencies": {"@liindata/ls-button": "link:D:/work/liindata-ui-pnpm/packages/button","lerna": "7.4.1","vue": "^3.3.7"},"devDependencies": {"@vitejs/plugin-vue": "^4.4.0","vite": "^4.5.0"}
}

pendencies": {
“@liindata/ls-button”: “link:D:/work/liindata-ui-pnpm/packages/button”,
“lerna”: “7.4.1”,
“vue”: “^3.3.7”
},
“devDependencies”: {
“@vitejs/plugin-vue”: “^4.4.0”,
“vite”: “^4.5.0”
}
}

执行 pnpm play 即可启动vite