vue3之使用vite搭建组件库
在使用 vite 相继搭建了 react 组件库、js 工具函数库后屡试不爽，于是又搭建了移动端 vue 的组件库，由于每次开发使用到的组件基本都是那几个，因此想着封装一下，方便后续偷懒。
1、搭建基础环境
npm create vite@latest vue-lib-lei -- --template vue-ts
1
2、进入项目并安装相关依赖
cd vue-lib-lei
npm install
1
2
2
3、项目运行无误后，接下来开始更改相关配置文件。
// 将tsconfig.json配置文件更改如下
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
},
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"allowImportingTsExtensions": true,
"declaration": true,
"outDir": "dist",
"emitDeclarationOnly": true,
"isolatedModules": true
},
"include": ["packages"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
4、安装依赖并更改 vite.config.ts 配置文件
npm install vite-plugin-dts vite-plugin-static-copy -D
1
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import dts from 'vite-plugin-dts';
import {viteStaticCopy } from 'vite-plugin-static-copy';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
plugins: [
vue(),
dts({
insertTypesEntry: true,
}),
viteStaticCopy({
targets: [
{
src: 'src/assets/*',
dest: 'assets'
}
]
}),
],
build: {
outDir: 'dist',
assetsDir: 'assets',
lib: {
entry: path.resolve(__dirname, './packages/index.ts'),
name: 'vue-lib-lei',
fileName: (format) => `vue-lib-lei.${format}.js`
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
},
},
},
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
5、更新 package.json 文件，添加如下配置
"type": "module",
"main": "./dist/vue-lib-lei.umd.js",
"module": "./dist/vue-lib-lei.es.js",
"types": "./dist/index.d.ts",
"files": [
"dist"
],
"peerDependencies": {
"vue": ">=3.4"
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
6、准备工作完毕后，现在开始创建组件，由于上面配置的是 packages 目录，因此创建 packages 目录，后续开发的组件都在该目录下
创建 Button 目录，该目录下依次创建 Button.vue 文件、index.ts 文件
/packages/Button/Button.vue 文件
<template>
<button>按钮</button>
</template>
<script lang="ts" setup></script>
<script lang="ts">
export default {
name: "MyButton"
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
/packages/Button/index.ts 文件
import type { App } from "vue"
import Button from './Header.vue'
export default {
install: (app: App) {
app.component(Popup.name as string, Popup);
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
在 /packages/index.ts 文件中导入所有组件
import type { App } from 'vue'
import MyButton from './Button/Button.vue'
const components = [MyButton]
const install = (app: App) => {
components.forEach(component => {
app.component(component.name as string, component)
})
}
export { MyButton }
export default {
install
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
然后就可以打包发布到 npm 上。
使用：
1、安装 vue-lib-lei
npm install vue-lib-lei
1
2、全局导入
// /src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import VueLibLei from 'vue-lib-lei';
import 'vue-lib-lei/dist/style.css';
const app = createApp(App);
app.use(VueLibLei);
app.mount('#app');
// 组件中使用时
<MyButton></MyButton>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
3、按需引入
// /src/main.ts
import { MyButton } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";
const app = createApp(App);
app.component(MyButton.name, MyButton);
app.mount('#app');
1
2
3
4
5
6
7
2
3
4
5
6
7
4、也可以不在 main.ts 中配置，直接在组件中引入使用
import { MyButton } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";
<MyButton></MyButton>
1
2
3
4
5
2
3
4
5
编辑 (opens new window)