t20-common-lib 0.2.4 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +198 -15
- package/package.json +1 -1
- package/packages/table-page/index.js +8 -0
- package/packages/table-page/src/main.vue +41 -0
- package/src/index.js +3 -3
- package/packages/mybutton/index.js +0 -8
- package/packages/mybutton/src/main.vue +0 -62
package/README.md
CHANGED
|
@@ -1,24 +1,207 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 本地组件库推送至 npm 仓库完整步骤
|
|
2
2
|
|
|
3
|
-
##
|
|
4
|
-
|
|
5
|
-
npm install
|
|
6
|
-
```
|
|
3
|
+
## 一、前置准备：确保项目结构与基础配置完整
|
|
4
|
+
在推送前，需保证组件库项目具备 npm 包的基本结构，核心文件不可缺失。
|
|
7
5
|
|
|
8
|
-
###
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
### 1.1 必备项目文件清单
|
|
7
|
+
| 文件/目录 | 作用说明 |
|
|
8
|
+
|---------------------|--------------------------------------------------------------------------|
|
|
9
|
+
| `package.json` | npm 包核心配置文件，记录包名、版本、入口等关键信息 |
|
|
10
|
+
| `src/` | 组件源代码目录（存放组件逻辑、样式等） |
|
|
11
|
+
| 入口文件（如 `src/index.js`） | 组件库对外暴露的入口，统一导出所有组件（替代默认 `main.js` 需同步配置） |
|
|
12
|
+
| `README.md` | 包的说明文档，需包含安装方式、使用示例、API 文档等，方便其他开发者使用 |
|
|
13
|
+
| `dist/`（可选） | 若组件库需编译（如 TypeScript、JSX），存放构建后的产物（需在 `files` 中声明） |
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
|
|
16
|
+
## 二、核心配置：完善 package.json
|
|
17
|
+
`package.json` 是 npm 包的“身份证”，需确保关键字段配置正确，避免推送失败或使用异常。
|
|
18
|
+
|
|
19
|
+
### 2.1 必选配置字段
|
|
20
|
+
打开项目根目录的 `package.json`，补充或修改以下字段：
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"name": "your-unique-component-lib", // 🔴 必选：npm 仓库唯一包名（先去 npm 官网查是否已被占用）
|
|
24
|
+
"version": "1.0.0", // 🔴 必选：版本号（遵循语义化版本：major.minor.patch）
|
|
25
|
+
"description": "A high-quality UI component library for React/Vue", // 包的简短描述
|
|
26
|
+
"main": "dist/index.js", // 🔴 必选：CommonJS 入口（构建后产物路径，若未构建可填 src/index.js）
|
|
27
|
+
"module": "src/index.js", // 可选：ES Module 入口（支持 tree-shaking）
|
|
28
|
+
"type": "module", // 可选：声明为 ES 模块（若使用 import/export）
|
|
29
|
+
"files": [ // 🔴 必选：指定推送到 npm 的文件/目录（避免冗余文件）
|
|
30
|
+
"src",
|
|
31
|
+
"dist",
|
|
32
|
+
"README.md"
|
|
33
|
+
],
|
|
34
|
+
"keywords": ["ui", "component", "react", "vue"], // 可选：关键词（方便 npm 搜索）
|
|
35
|
+
"author": "Your Name <your-email@example.com>", // 可选：作者信息
|
|
36
|
+
"license": "MIT", // 🔴 必选：开源协议（常用 MIT）
|
|
37
|
+
"repository": { // 可选：代码仓库地址（方便开发者查看源码）
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "https://github.com/your-username/your-repo.git"
|
|
40
|
+
},
|
|
41
|
+
"homepage": "https://github.com/your-username/your-repo#readme", // 可选：项目主页
|
|
42
|
+
"bugs": { // 可选：问题反馈地址
|
|
43
|
+
"url": "https://github.com/your-username/your-repo/issues"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
14
46
|
```
|
|
15
|
-
|
|
47
|
+
|
|
48
|
+
### 2.2 关键配置说明
|
|
49
|
+
- **`name` 字段**：必须在 npm 仓库中唯一，建议先访问 [npm 官网](https://www.npmjs.com/) 搜索包名，确认无重复后再配置。
|
|
50
|
+
- **`version` 字段**：每次推送新版本需更新（不可重复推送同一版本），语义化版本规则：
|
|
51
|
+
- `patch`：修复 bug（1.0.0 → 1.0.1）
|
|
52
|
+
- `minor`：新增功能（1.0.0 → 1.1.0）
|
|
53
|
+
- `major`：不兼容的重大更新（1.0.0 → 2.0.0）
|
|
54
|
+
- **`files` 字段**：仅推送声明的文件/目录，避免将 `node_modules`、`.git`、`.env` 等冗余文件上传。
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
## 三、编译组件库（可选，视技术栈而定）
|
|
58
|
+
若组件库使用 TypeScript、JSX、Sass 等需要编译的技术，需先执行构建命令，生成可直接使用的产物。
|
|
59
|
+
|
|
60
|
+
### 3.1 常见构建命令示例
|
|
61
|
+
| 技术栈 | 构建命令（需在 `package.json` 中配置 `scripts`） | 产物目录 |
|
|
62
|
+
|--------------|--------------------------------------------------|----------|
|
|
63
|
+
| TypeScript | `"build": "tsc"`（需配置 `tsconfig.json`） | `dist/` |
|
|
64
|
+
| React + TS | `"build": "rollup -c"`（需配置 Rollup） | `dist/` |
|
|
65
|
+
| Vue 3 | `"build": "vue-tsc --noEmit && vite build"` | `dist/` |
|
|
66
|
+
|
|
67
|
+
### 3.2 配置示例（以 Rollup 为例）
|
|
68
|
+
1. 安装依赖：
|
|
69
|
+
```bash
|
|
70
|
+
npm install rollup @rollup/plugin-babel @rollup/plugin-node-resolve --save-dev
|
|
71
|
+
```
|
|
72
|
+
2. 新增 `rollup.config.js`：
|
|
73
|
+
```javascript
|
|
74
|
+
import resolve from '@rollup/plugin-node-resolve';
|
|
75
|
+
import babel from '@rollup/plugin-babel';
|
|
76
|
+
|
|
77
|
+
export default {
|
|
78
|
+
input: 'src/index.js', // 入口文件
|
|
79
|
+
output: [
|
|
80
|
+
{ format: 'cjs', file: 'dist/index.cjs.js' }, // CommonJS 产物
|
|
81
|
+
{ format: 'esm', file: 'dist/index.esm.js' } // ES Module 产物
|
|
82
|
+
],
|
|
83
|
+
plugins: [resolve(), babel({ babelHelpers: 'bundled' })]
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
3. 执行构建：
|
|
87
|
+
```bash
|
|
88
|
+
npm run build
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## 四、npm 账号准备：注册与登录
|
|
93
|
+
### 4.1 注册 npm 账号
|
|
94
|
+
- 方式 1：访问 [npm 官网](https://www.npmjs.com/)，填写用户名、邮箱、密码完成注册（需验证邮箱）。
|
|
95
|
+
- 方式 2：通过命令行注册（需确保网络可访问 npm 官方仓库）：
|
|
96
|
+
```bash
|
|
97
|
+
npm adduser
|
|
98
|
+
```
|
|
99
|
+
按提示依次输入用户名、密码、邮箱，完成注册。
|
|
100
|
+
|
|
101
|
+
### 4.2 登录 npm 账号
|
|
102
|
+
在项目根目录打开终端，执行登录命令：
|
|
103
|
+
```bash
|
|
104
|
+
npm login
|
|
16
105
|
```
|
|
106
|
+
- 输入用户名、密码（输入时终端无明文显示，正常输入即可）、邮箱验证码（若开启双重验证）。
|
|
107
|
+
- 登录成功提示：`Logged in as [your-username] on https://registry.npmjs.org/`。
|
|
17
108
|
|
|
18
|
-
|
|
109
|
+
> ⚠️ 注意：若之前切换过 npm 镜像（如淘宝镜像），需先切回官方镜像，否则推送失败：
|
|
110
|
+
> ```bash
|
|
111
|
+
> npm config set registry https://registry.npmjs.org/
|
|
112
|
+
> ```
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
## 五、推送前校验：确保包内容正确
|
|
116
|
+
推送前建议通过 `npm pack` 生成压缩包，检查包含的文件是否符合预期，避免冗余或缺失。
|
|
117
|
+
|
|
118
|
+
### 5.1 生成压缩包
|
|
119
|
+
在项目根目录执行：
|
|
120
|
+
```bash
|
|
121
|
+
npm pack
|
|
19
122
|
```
|
|
20
|
-
|
|
123
|
+
执行后会在根目录生成 `your-unique-component-lib-1.0.0.tgz` 压缩包。
|
|
124
|
+
|
|
125
|
+
### 5.2 校验压缩包内容
|
|
126
|
+
- 解压压缩包，查看内部文件是否与 `package.json` 中 `files` 声明的一致。
|
|
127
|
+
- 重点检查：`src/`、`dist/`、`README.md` 是否存在，无 `node_modules`、`.gitignore` 等冗余文件。
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
## 六、推送至 npm 仓库
|
|
131
|
+
### 6.1 首次推送
|
|
132
|
+
确保登录成功且构建完成后，在项目根目录执行推送命令：
|
|
133
|
+
```bash
|
|
134
|
+
npm publish
|
|
21
135
|
```
|
|
136
|
+
- 推送成功提示：`+ your-unique-component-lib@1.0.0`。
|
|
137
|
+
- 推送失败常见原因及解决：
|
|
138
|
+
| 错误信息 | 原因分析 | 解决方法 |
|
|
139
|
+
|-------------------------------------------|-------------------------------------------|-------------------------------------------|
|
|
140
|
+
| `You do not have permission to publish` | 包名已被占用 | 修改 `package.json` 中 `name` 为唯一名称 |
|
|
141
|
+
| `version already exists` | 版本号已存在 | 更新 `version` 字段（如 1.0.0 → 1.0.1） |
|
|
142
|
+
| `403 Forbidden` | 未验证邮箱或无权限 | 验证 npm 账号邮箱，或确认登录账号正确 |
|
|
143
|
+
|
|
144
|
+
### 6.2 后续版本更新
|
|
145
|
+
每次更新组件库后，需先更新版本号，再执行推送：
|
|
146
|
+
1. 更新版本号（三种方式，根据更新类型选择）：
|
|
147
|
+
```bash
|
|
148
|
+
npm version patch # 修复 bug：1.0.0 → 1.0.1
|
|
149
|
+
npm version minor # 新增功能：1.0.0 → 1.1.0
|
|
150
|
+
npm version major # 重大更新：1.0.0 → 2.0.0
|
|
151
|
+
```
|
|
152
|
+
执行后会自动修改 `package.json` 中的 `version` 字段，并生成 Git 标签（若使用 Git）。
|
|
153
|
+
|
|
154
|
+
2. 重新构建（若代码有修改）：
|
|
155
|
+
```bash
|
|
156
|
+
npm run build
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
3. 推送新版本：
|
|
160
|
+
```bash
|
|
161
|
+
npm publish
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
## 七、推送后验证：确认包可正常使用
|
|
166
|
+
推送成功后，建议通过以下步骤验证包是否可正常安装和使用：
|
|
167
|
+
|
|
168
|
+
1. 访问 npm 官网，搜索你的包名（如 `your-unique-component-lib`），确认包已上线，版本号正确。
|
|
169
|
+
2. 在本地新建测试项目，安装你的组件库：
|
|
170
|
+
```bash
|
|
171
|
+
npm install your-unique-component-lib
|
|
172
|
+
```
|
|
173
|
+
3. 在测试项目中导入并使用组件，验证功能正常：
|
|
174
|
+
```javascript
|
|
175
|
+
// 示例：React 项目中使用
|
|
176
|
+
import { Button } from 'your-unique-component-lib';
|
|
177
|
+
function App() {
|
|
178
|
+
return <Button>Test Button</Button>;
|
|
179
|
+
}
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
## 八、常见问题与注意事项
|
|
184
|
+
1. **切换回国内镜像**：推送完成后，若需恢复 npm 国内镜像（如淘宝镜像），执行：
|
|
185
|
+
```bash
|
|
186
|
+
npm config set registry https://registry.npmmirror.com/
|
|
187
|
+
```
|
|
188
|
+
2. **私有包推送**：若组件库为私有（不公开），需 npm 付费账号，推送时添加 `--access=private`：
|
|
189
|
+
```bash
|
|
190
|
+
npm publish --access=private
|
|
191
|
+
```
|
|
192
|
+
3. **忽略文件**：通过 `/.npmignore` 文件指定不推送到 npm 的文件（优先级高于 `.gitignore`），常见配置：
|
|
193
|
+
```
|
|
194
|
+
# .npmignore
|
|
195
|
+
node_modules/
|
|
196
|
+
.git/
|
|
197
|
+
.env
|
|
198
|
+
.gitignore
|
|
199
|
+
tests/
|
|
200
|
+
```
|
|
201
|
+
4. **语义化版本规范**：严格遵循 [语义化版本 2.0.0](https://semver.org/)，避免版本混乱导致用户升级困难。
|
|
202
|
+
|
|
22
203
|
|
|
23
|
-
|
|
24
|
-
|
|
204
|
+
## 九、参考资源
|
|
205
|
+
- [npm 官方文档：发布包](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages)
|
|
206
|
+
- [语义化版本规范](https://semver.org/)
|
|
207
|
+
- [Rollup 官方文档（组件库构建）](https://rollupjs.org/guide/en/)
|
package/package.json
CHANGED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="t20-table-page flex-column">
|
|
3
|
+
<div class="m-b-s" v-if="$slots.header">
|
|
4
|
+
<slot name="header"></slot>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="t20-page-content flex-column flex-1">
|
|
7
|
+
<slot></slot>
|
|
8
|
+
<div class="table flex-1">
|
|
9
|
+
<slot name="table"></slot>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="page-footer-shadow flex-box flex-lr flex-v" v-if="$slots.footer">
|
|
13
|
+
<slot name="footer"></slot>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: 'TablePage'
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<style lang="scss" scoped>
|
|
25
|
+
.t20-table-page {
|
|
26
|
+
padding: 8px 8px 0 !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.t20-page-content {
|
|
30
|
+
height: 100%;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
.table {
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.page-footer-shadow {
|
|
38
|
+
height: 44px !important;
|
|
39
|
+
margin-bottom: 0 !important;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
package/src/index.js
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
import fitlers from './filters/index'
|
|
3
3
|
import repairEl from './utils/repairElementUI'
|
|
4
4
|
// 导入组件
|
|
5
|
-
import MyButton from '../packages/mybutton/index.js'
|
|
6
5
|
import MainPage from '../packages/main-page/index.js'
|
|
6
|
+
import TablePage from '../packages/table-page/index.js'
|
|
7
7
|
import TabPane from '../packages/tab-pane/index.js'
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
// 存储组件列表
|
|
11
11
|
const components = [
|
|
12
|
-
MyButton,
|
|
13
12
|
MainPage,
|
|
13
|
+
TablePage,
|
|
14
14
|
TabPane
|
|
15
15
|
]
|
|
16
16
|
|
|
@@ -40,7 +40,7 @@ export default {
|
|
|
40
40
|
|
|
41
41
|
export {
|
|
42
42
|
// 以下是具体的组件列表
|
|
43
|
-
MyButton,
|
|
44
43
|
MainPage,
|
|
44
|
+
TablePage,
|
|
45
45
|
repairEl
|
|
46
46
|
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-button
|
|
3
|
-
:size="size"
|
|
4
|
-
:type="type"
|
|
5
|
-
:icon="icon"
|
|
6
|
-
:loading="loading"
|
|
7
|
-
:disabled="disabled || !hasPermission"
|
|
8
|
-
:round="round"
|
|
9
|
-
:circle="circle"
|
|
10
|
-
@click="handleClick"
|
|
11
|
-
v-bind="$attrs"
|
|
12
|
-
v-on="$listeners"
|
|
13
|
-
>
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</el-button>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<script>
|
|
19
|
-
export default {
|
|
20
|
-
name: 'MyButton',
|
|
21
|
-
props: {
|
|
22
|
-
size: {
|
|
23
|
-
type: String,
|
|
24
|
-
default: 'medium',
|
|
25
|
-
validator: val => ['mini', 'small', 'medium', 'large'].includes(val)
|
|
26
|
-
},
|
|
27
|
-
type: {
|
|
28
|
-
type: String,
|
|
29
|
-
default: 'default',
|
|
30
|
-
validator: val => ['primary', 'success', 'warning', 'danger', 'info', 'text', 'default'].includes(val)
|
|
31
|
-
},
|
|
32
|
-
icon: String,
|
|
33
|
-
loading: Boolean,
|
|
34
|
-
disabled: Boolean,
|
|
35
|
-
round: Boolean,
|
|
36
|
-
circle: Boolean,
|
|
37
|
-
permission: String
|
|
38
|
-
},
|
|
39
|
-
computed: {
|
|
40
|
-
hasPermission() {
|
|
41
|
-
if (!this.permission) return true
|
|
42
|
-
// 实际项目中替换为真实的权限判断逻辑
|
|
43
|
-
return true
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
methods: {
|
|
47
|
-
handleClick(e) {
|
|
48
|
-
this.$emit('click', e)
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
</script>
|
|
53
|
-
|
|
54
|
-
<style scoped lang="scss">
|
|
55
|
-
::v-deep .el-button {
|
|
56
|
-
margin-right: 8px;
|
|
57
|
-
|
|
58
|
-
&:last-child {
|
|
59
|
-
margin-right: 0;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
</style>
|