组件库开发

组件库开发

环境搭建

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.yaml

packages:
 - "packages/*"

1
2
3
4
5

// root/lerna.json

{
    "version": "0.0.0",
    "npmClient": "pnpm"
}
1
2
3
4
5
6

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

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

使用lerna create

创建的button子项目内容如下

root/
  |
  |packages/
	|
  	|button/
  		|__test__/  测试文件存放
		|src/  项目代码
			|index.vue
		|index.js 入口文件
 		|packages.json
		|READEME.md
1
2
3
4
5
6
7
8
9
10
11

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

<template>
  <h1>this button component 123</h1>
</template>

<script>
export default {
  name: 'ls-button',
  setup() {
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11

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

import Button from './src/index.vue'

Button.install = function (app) {
    app.component(Button.name, Button)
}

export default Button
1
2
3
4
5
6
7

导出该项目中的各组件。

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

{
  "name": "@liindata/ls-button",  // 注意这里的名字，下边要用的
  "version": "0.0.0",
  "description": "> TODO: description",
  "author": "zhangxm ",
  "homepage": "",
  "license": "ISC",
  "main": "index.js",
  "directories": {
    "lib": "src",
    "test": "__tests__"
  },
  "files": [
    "src"
  ],
  "scripts": {
    "test": "node ./__tests__/button.test.js"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

root/play/
	|src/
		|App.vue
		|main.js
	|index.html
	|vite.config.js 
1
2
3
4
5
6

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

<template>
    <h1>monorepo demo 1</h1>
    <lsbutton></lsbutton>
</template>
<script setup>

import Lsbutton from '@liindata/ls-button' // 这里引入我的

</script>

1
2
3
4
5
6
7
8
9
10

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

import {createApp} from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')
1
2
3
4
5
6

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()]
})
1
2
3
4
5
6

这时候准备工作已经ok！

2、依赖安装

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

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

2.1 安装依赖

安装 vite 
pnpm add vite -w
pnpm add @vitejs/plugin-vue -w -D
安装 vue
pnpm add vue -w
1
2
3
4
5

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

pnpm link --dit ../../
1

执行后，在根目录 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"
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

执行 pnpm play 即可启动vite