Skip to content

Commit 40abf34

Browse files
bin-Kbin-K
committed
feat(mono): 搭建项目并开发组件(changelog-needed)
ISSUES CLOSED: none
1 parent 3dfd701 commit 40abf34

File tree

12 files changed

+888
-3
lines changed

12 files changed

+888
-3
lines changed

‎.hintrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": [
3+
"development"
4+
],
5+
"hints": {
6+
"typescript-config/consistent-casing": "off"
7+
}
8+
}

‎README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
### 自定义组件库（Vue3）
2+
3+
- https://juejin.cn/column/7118932817119019015
4+
5+
#### 初始化monorepo项目
6+
7+
- 参考 https://github.com/bin-K/monorepo-pnpm-vue
8+
9+
#### 组件库的环境配置
10+
11+
- 技术选型：使用 Vite+Ts 开发的是 Vue3 组件库
12+
- typescript、vue3 、sass等
13+
14+
```shell
15+
pnpm add vue@next typescript sass -D -w
16+
```
17+
18+
##### 初始化ts
19+
20+
- 执行npx tsc --init 生成tsconfig.json ts 的配置文件
21+
22+
```shell
23+
npx tsc --init
24+
```
25+
26+
```json
27+
{
28+
"compilerOptions": {
29+
"baseUrl": ".",
30+
"jsx": "preserve",
31+
"strict": true,
32+
"target": "ES2015",
33+
"module": "ESNext",
34+
"skipLibCheck": true,
35+
"esModuleInterop": true,
36+
"moduleResolution": "Node",
37+
"lib": ["esnext", "dom"]
38+
}
39+
}
40+
```
41+
42+
##### 搭建基于vite的vue3项目
43+
44+
- 新建play 文件夹，初始化pnpm init, 后续的组件调试就在这个项目下进行
45+
- 安装依赖，在play安装vite和vitejs/plugin-vue插件,@vitejs/plugin-vue插件是为了解析后缀为.vue文件的
46+
- 新建vite.config.ts
47+
48+
```shell
49+
pnpm add vite @vitejs/plugin-vue -D
50+
51+
touch vite.config.ts
52+
```
53+
54+
```ts
55+
import { defineConfig } from 'vite'
56+
import vue from '@vitejs/plugin-vue'
57+
58+
export default defineConfig({
59+
plugins: [vue()],
60+
})
61+
```
62+
63+
- 新建index.html
64+
65+
```html
66+
<!doctype html>
67+
<html lang="en">
68+
<head>
69+
<meta charset="UTF-8" />
70+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
71+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
72+
<title>play</title>
73+
</head>
74+
<body>
75+
<div id="app"></div>
76+
<script src="main.ts" type="module"></script>
77+
</body>
78+
</html>
79+
```
80+
81+
- 新建app.vue
82+
83+
```vue
84+
<template>
85+
<div>启动测试</div>
86+
</template>
87+
```
88+
89+
- 新建入口文件 main.ts
90+
91+
```ts
92+
import { createApp } from 'vue'
93+
import App from './app.vue'
94+
95+
const app = createApp(App)
96+
97+
app.mount('#app')
98+
```
99+
100+
- play 项目需要测试本地的组件库,所以也需要将 play 和我们的组件库关联在一起。修改一下pnpm-workspace.yaml文件
101+
102+
```yml
103+
packages:
104+
- 'packages/**'
105+
- 'play'
106+
```
107+
108+
- package.json
109+
110+
```json
111+
{
112+
"workspaces": ["packages/**", "play"]
113+
}
114+
```
115+
116+
- 新建一个声明文件vite.d.ts
117+
118+
```ts
119+
declare module '*.vue' {
120+
import type { DefineComponent } from 'vue'
121+
const component: DefineComponent<{}, {}, any>
122+
}
123+
```

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@
3333
"husky": "^9.0.11",
3434
"lerna": "^3.22.1",
3535
"lint-staged": "^15.2.2",
36-
"prettier": "^3.2.5"
36+
"prettier": "^3.2.5",
37+
"sass": "^1.72.0",
38+
"typescript": "^5.4.2",
39+
"vue": "^3.4.21"
3740
},
3841
"repository": {
3942
"type": "git",
@@ -50,7 +53,8 @@
5053
}
5154
},
5255
"workspaces": [
53-
"packages/*"
56+
"packages/**",
57+
"play"
5458
],
5559
"lint-staged": {
5660
"src/**/*.{js,jsx,ts,tsx,vue}": [

‎play/app.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>启动测试</div>
3+
</template>
4+
5+
<script lang="ts" setup></script>
6+
7+
<style lang="scss" scoped></style>

‎play/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>play</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script src="main.ts" type="module"></script>
12+
</body>
13+
</html>

‎play/main.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import App from './app.vue'
3+
4+
const app = createApp(App)
5+
6+
app.mount('#app')

‎play/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "play",
3+
"version": "1.0.0",
4+
"description": "",
5+
"type": "module",
6+
"main": "index.js",
7+
"scripts": {
8+
"dev": "vite",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"devDependencies": {
15+
"@vitejs/plugin-vue": "^5.0.4",
16+
"vite": "^5.2.2"
17+
}
18+
}

‎play/vite.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
export default defineConfig({
5+
plugins: [vue()],
6+
})

‎play/vite.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.vue' {
2+
import type { DefineComponent } from 'vue'
3+
const component: DefineComponent<{}, {}, any>
4+
}

0 commit comments

Comments
 (0)