Skip to content

Commit 8fec8ae

Browse files
kieranwvkieranwv
authored
Merge pull request #1 from starter-collective/feat/bundle
feat: add bundle plugin for starter-lib-vue3
2 parents 9d814b6 + e3df0f3 commit 8fec8ae

File tree

20 files changed

+2645
-1364
lines changed

20 files changed

+2645
-1364
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ pnpm release
6262
If you prefer to do it manually with the cleaner git history:
6363

6464
```bash
65-
npx degit starter-collective/starter-lib-vue3
65+
npx degit starter-collective/starter-lib-vue3 starter-lib-vue3
6666

6767
cd starter-lib-vue3
6868

‎docs/en/guide/getting-started.md‎

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Getting Started
22

3-
This section will help you set up and get started with `starter-lib-vue3`.
3+
This section will help you set up and start using `starter-lib-vue3`.
44

55
## Using Package Manager
66

@@ -22,7 +22,7 @@ pnpm install starter-lib-vue3
2222

2323
### Full Import
2424

25-
If you're not too concerned about the bundled file size, using full import is more convenient.
25+
If you're not concerned about the final bundle size, using full import is more convenient.
2626

2727
```ts
2828
// main.ts
@@ -40,19 +40,95 @@ app.mount('#app')
4040
```vue
4141
<!-- App.vue -->
4242
<template>
43-
<SayHello name="Kieran" />
43+
<StSayHello name="Kieran" />
44+
</template>
45+
```
46+
47+
### Auto Import On Demand
48+
49+
You can achieve component auto import by installing the `unplugin-vue-components` and `unplugin-auto-import` plugins.
50+
51+
::: code-group
52+
53+
```sh [pnpm]
54+
pnpm add unplugin-vue-components unplugin-auto-import -D
55+
```
56+
57+
```sh [yarn]
58+
yarn add unplugin-vue-components unplugin-auto-import -D
59+
```
60+
61+
```sh [npm]
62+
npm install unplugin-vue-components unplugin-auto-import -D
63+
```
64+
65+
:::
66+
67+
Then add the following code to your `Vite` configuration file:
68+
69+
```ts
70+
// vite.config.ts
71+
import { StarterLibVue3Resolver } from 'starter-lib-vue3'
72+
import AutoImport from 'unplugin-auto-import/vite'
73+
import Components from 'unplugin-vue-components/vite'
74+
import { defineConfig } from 'vite'
75+
76+
export default defineConfig({
77+
// ...
78+
plugins: [
79+
// ...
80+
AutoImport({
81+
resolvers: [StarterLibVue3Resolver()],
82+
}),
83+
Components({
84+
resolvers: [StarterLibVue3Resolver()],
85+
}),
86+
],
87+
})
88+
```
89+
90+
Now you can directly use starter-lib-vue3 components in SFC files, and their styles will be automatically imported.
91+
92+
```vue
93+
<script>
94+
// No need to manually import :P
95+
// import { StSayHello } from 'starter-lib-vue3'
96+
// import 'starter-lib-vue3/dist/es/say-hello/SayHello.css'
97+
</script>
98+
99+
<template>
100+
<StSayHello name="Kieran" />
101+
</template>
102+
```
103+
104+
### Manual Import On Demand
105+
106+
You can manually import the components you need (components consist of logic files and style files):
107+
108+
```vue
109+
<script>
110+
import { StSayHello } from 'starter-lib-vue3'
111+
import 'starter-lib-vue3/dist/es/say-hello/SayHello.css'
112+
113+
export default {
114+
components: { StSayHello },
115+
}
116+
</script>
117+
118+
<template>
119+
<StSayHello name="Kieran" />
44120
</template>
45121
```
46122

47123
## Browser Direct Import
48124

49-
You can use the global variable `StarterLibVue3` by importing directly through the browser's HTML `script` tag.
125+
You can use the global variable `StarterLibVue3` by directly importing through the browser's HTML `script` tag.
50126

51127
```js
52128
<script src="https://unpkg.com/starter-lib-vue3"></script>
53129
```
54130

55-
There are different import methods depending on the CDN provider. Here we use unpkg as an example. You can also use other CDN providers.
131+
Different CDN providers have different import methods. Here we use unpkg as an example. You can also use other CDN providers.
56132

57133
```html
58134
<!DOCTYPE html>
@@ -72,7 +148,7 @@ There are different import methods depending on the CDN provider. Here we use un
72148
<script src="./wxdata-ui.umd.cjs"></script>
73149
<script>
74150
const app = Vue.createApp({
75-
template: '<SayHello name="Kieran" />'
151+
template: '<StSayHello name="Kieran" />'
76152
})
77153
app.use(StarterLibVue3).mount('#app')
78154
</script>
@@ -83,7 +159,7 @@ There are different import methods depending on the CDN provider. Here we use un
83159

84160
## Volar Support
85161

86-
If you're using Volar, specify global component types via `compilerOptions.type` in `tsconfig.json`.
162+
If you're using Volar, please specify global component types via `compilerOptions.type` in `tsconfig.json`.
87163

88164
```json
89165
// tsconfig.json
@@ -95,4 +171,4 @@ If you're using Volar, specify global component types via `compilerOptions.type`
95171
}
96172
```
97173

98-
Now you can get component type hints through Volar.
174+
Now, you can get component type hints through Volar.

‎docs/examples/say-hello/basic.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup>
2-
import { SayHello } from 'starter-lib-vue3'
3-
import 'starter-lib-vue3/style.css'
2+
import { StSayHello } from 'starter-lib-vue3'
3+
import 'starter-lib-vue3/dist/es/say-hello/style.css'
44
</script>
55

66
<template>
7-
<SayHello name="Kieran" />
7+
<StSayHello name="Kieran" />
88
</template>

‎docs/zh/guide/getting-started.md‎

Lines changed: 81 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ pnpm install starter-lib-vue3
2020

2121
:::
2222

23-
### 完整引入
23+
### 完整导入
2424

2525
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
2626

@@ -40,19 +40,95 @@ app.mount('#app')
4040
```vue
4141
<!-- App.vue -->
4242
<template>
43-
<SayHello name="Kieran" />
43+
<StSayHello name="Kieran" />
4444
</template>
4545
```
4646

47-
## 浏览器直接引入
47+
### 按需自动导入
48+
49+
通过安装 `unplugin-vue-components` 和 `unplugin-auto-import` 插件，实现组件按需自动导入。
50+
51+
::: code-group
52+
53+
```sh [pnpm]
54+
pnpm add unplugin-vue-components unplugin-auto-import -D
55+
```
56+
57+
```sh [yarn]
58+
yarn add unplugin-vue-components unplugin-auto-import -D
59+
```
60+
61+
```sh [npm]
62+
npm install unplugin-vue-components unplugin-auto-import -D
63+
```
64+
65+
:::
66+
67+
然后把下列代码插入到你的 `Vite` 配置文件中：
68+
69+
```ts
70+
// vite.config.ts
71+
import { StarterLibVue3Resolver } from 'starter-lib-vue3'
72+
import AutoImport from 'unplugin-auto-import/vite'
73+
import Components from 'unplugin-vue-components/vite'
74+
import { defineConfig } from 'vite'
75+
76+
export default defineConfig({
77+
// ...
78+
plugins: [
79+
// ...
80+
AutoImport({
81+
resolvers: [StarterLibVue3Resolver()],
82+
}),
83+
Components({
84+
resolvers: [StarterLibVue3Resolver()],
85+
}),
86+
],
87+
})
88+
```
89+
90+
现在你可以在 SFC 文件中直接使用 starter-lib-vue3 的组件，并且其样式也是自动化的导入。
91+
92+
```vue
93+
<script>
94+
// 无需手动引入 :P
95+
// import { StSayHello } from 'starter-lib-vue3'
96+
// import 'starter-lib-vue3/dist/es/say-hello/SayHello.css'
97+
</script>
98+
99+
<template>
100+
<StSayHello name="Kieran" />
101+
</template>
102+
```
103+
104+
### 按需手动导入
105+
106+
你可已手动导入你需要的组件（组件由逻辑文件和样式文件组成）：
107+
108+
```vue
109+
<script>
110+
import { StSayHello } from 'starter-lib-vue3'
111+
import 'starter-lib-vue3/dist/es/say-hello/SayHello.css'
112+
113+
export default {
114+
components: { StSayHello },
115+
}
116+
</script>
117+
118+
<template>
119+
<StSayHello name="Kieran" />
120+
</template>
121+
```
122+
123+
## 浏览器直接导入
48124

49125
直接通过浏览器的 HTML `script` 标签导入就可以使用全局变量 `StarterLibVue3` 了。
50126

51127
```js
52128
<script src="https://unpkg.com/starter-lib-vue3"></script>
53129
```
54130

55-
根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 举例。 你也可以使用其它的 CDN 供应商。
131+
根据不同的 CDN 提供商有不同的导入方式， 我们在这里以 unpkg 举例。 你也可以使用其它的 CDN 供应商。
56132

57133
```html
58134
<!DOCTYPE html>
@@ -72,7 +148,7 @@ app.mount('#app')
72148
<script src="./wxdata-ui.umd.cjs"></script>
73149
<script>
74150
const app = Vue.createApp({
75-
template: '<SayHello name="Kieran" />'
151+
template: '<StSayHello name="Kieran" />'
76152
})
77153
app.use(StarterLibVue3).mount('#app')
78154
</script>

‎package.json‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"type": "module",
44
"version": "0.5.0",
55
"packageManager": "pnpm@9.10.0",
6-
"description": "Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and IIFE formats. ",
6+
"description": "Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and UMD formats. ",
77
"author": "Kieran Wang <kieranwme@gmail.com> (https://github.com/kieranwv/)",
88
"license": "MIT",
99
"homepage": "https://github.com/starter-collective/starter-lib-vue3#readme",
@@ -25,19 +25,18 @@
2525
],
2626
"exports": {
2727
".": {
28-
"types": "./dist/index.d.ts",
29-
"import": "./dist/index.js",
30-
"require": "./dist/index.cjs"
28+
"types": "./dist/es/index.d.ts",
29+
"import": "./dist/es/index.js",
30+
"require": "./dist/lib/index.cjs"
3131
},
3232
"./*": "./*",
33-
"./volar": "./dist/volar.d.ts",
34-
"./style.css": "./dist/style.css"
33+
"./volar": "./dist/volar.d.ts"
3534
},
36-
"main": "dist/index.cjs",
37-
"module": "dist/index.js",
38-
"unpkg": "dist/index.global.js",
39-
"jsdelivr": "dist/index.global.js",
40-
"types": "dist/index.d.ts",
35+
"main": "dist/lib/index.cjs",
36+
"module": "dist/es/index.js",
37+
"unpkg": "dist/umd/index.js",
38+
"jsdelivr": "dist/umd/index.js",
39+
"types": "dist/es/index.d.ts",
4140
"files": [
4241
"dist"
4342
],
@@ -64,32 +63,35 @@
6463
"vue": "^3.2.0"
6564
},
6665
"devDependencies": {
67-
"@antfu/eslint-config": "^4.12.0",
66+
"@antfu/eslint-config": "^4.13.0",
6867
"@types/jsdom": "^21.1.7",
6968
"@types/markdown-it": "^14.1.2",
70-
"@types/node": "^22.14.0",
69+
"@types/node": "^22.15.14",
7170
"@vitejs/plugin-vue": "^5.2.3",
7271
"@vitejs/plugin-vue-jsx": "^4.1.2",
7372
"@vue/test-utils": "^2.4.6",
7473
"@vueuse/core": "^13.1.0",
7574
"bumpp": "^10.1.0",
76-
"eslint": "^9.24.0",
77-
"jsdom": "^26.0.0",
78-
"lint-staged": "^15.5.0",
75+
"cssnano": "^7.0.7",
76+
"eslint": "^9.26.0",
77+
"jsdom": "^26.1.0",
78+
"lint-staged": "^15.5.2",
7979
"markdown-it": "^14.1.0",
8080
"markdown-it-container": "^4.0.0",
81+
"postcss": "^8.5.3",
8182
"rimraf": "^6.0.1",
82-
"shiki": "^3.2.2",
83-
"simple-git-hooks": "^2.12.1",
83+
"shiki": "^3.4.0",
84+
"simple-git-hooks": "^2.13.0",
8485
"typescript": "^5.8.3",
85-
"unplugin-vue-components": "^28.4.1",
86-
"vite": "^6.2.6",
86+
"unplugin-vue-components": "^28.5.0",
87+
"vite": "^6.3.5",
88+
"vite-plugin-bundle-styles": "0.1.0-beta.1",
8789
"vite-plugin-dts": "^4.5.3",
8890
"vite-plugin-static-copy": "^2.3.1",
8991
"vitepress": "^1.6.3",
90-
"vitest": "^3.1.1",
92+
"vitest": "^3.1.3",
9193
"vue": "^3.5.13",
92-
"vue-tsc": "^2.2.8"
94+
"vue-tsc": "^2.2.10"
9395
},
9496
"simple-git-hooks": {
9597
"pre-commit": "pnpm lint-staged"

0 commit comments

Comments
 (0)