n20-project-component 1.0.0 → 1.0.3

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.
Files changed (10) hide show
  1. package/README.md +97 -51
  2. package/dist/n20-project-component.common.js +564 -28
  3. package/dist/n20-project-component.css +1 -1
  4. package/dist/n20-project-component.umd.js +564 -28
  5. package/dist/n20-project-component.umd.min.js +1 -1
  6. package/package.json +1 -1
  7. package/src/components/N20BatchInput/index.vue +237 -0
  8. package/src/components/N20CopyText/index.vue +3 -41
  9. package/src/components/N20FloatingToolbar/index.vue +318 -0
  10. package/src/index.js +6 -0
package/README.md CHANGED
@@ -1,91 +1,137 @@
1
1
  # n20-project-component
2
2
 
3
- PC 端 Vue 2 + Element UI 组件库，供公司内部项目复用。
3
+ PC 端 Vue 2 + Element UI 通用组件库，公司内部项目复用。
4
4
 
5
- ## 安装
5
+ ## 组件列表
6
+
7
+ | 组件 | 说明 | 状态 |
8
+ |------|------|------|
9
+ | N20CopyText | 点击复制文本，弹出「已复制」反馈 | ✅ 已完成 |
10
+ | N20FloatingToolbar | 选中文字后浮现操作工具条 | 🔲 待开发 |
11
+ | N20FrequentWords | 常用词输入，自动记录到本地缓存 | 🔲 待开发 |
12
+ | N20BatchInput | 批量输入，粘贴自动拆分为多个标签 | ✅ 已完成 |
13
+
14
+ ---
15
+
16
+ ## 发布
17
+
18
+ ### 前置条件
19
+
20
+ - Node 14+
21
+ - npm 账号（[注册地址](https://www.npmjs.com/signup)）
22
+ - npm 账号需开启 2FA 或创建 Granular Access Token
23
+
24
+ ### 构建
6
25
 
7
26
  ```bash
8
- npm install n20-project-component
27
+ npm run build
9
28
  ```
10
29
 
11
- ## 使用
30
+ 构建产物在 `dist/` 目录下：
12
31
 
13
- ### 全量注册
32
+ ```
33
+ dist/
34
+ ├── n20-project-component.umd.min.js # UMD 压缩版
35
+ ├── n20-project-component.umd.js # UMD 开发版
36
+ ├── n20-project-component.common.js # CommonJS
37
+ └── n20-project-component.css # 样式文件
38
+ ```
14
39
 
15
- ```javascript
16
- import Vue from 'vue'
17
- import N20Components from 'n20-project-component'
18
- import 'n20-project-component/dist/n20-project-component.css'
40
+ ### 发布到 npm
19
41
 
20
- Vue.use(N20Components)
21
- ```
42
+ ```bash
43
+ # 首次使用先登录
44
+ npm login
22
45
 
23
- ### 按需导入
46
+ # 发布（需要 2FA 验证码）
47
+ npm publish --otp=你的6位验证码
48
+ ```
24
49
 
25
- ```javascript
26
- import { DemoButton } from 'n20-project-component'
27
- import 'n20-project-component/dist/n20-project-component.css'
50
+ 如果用 Access Token 方式发布：
28
51
 
29
- export default {
30
- components: { DemoButton }
31
- }
52
+ ```bash
53
+ npm publish --access public --//registry.npmjs.org/:_authToken=你的token
32
54
  ```
33
55
 
34
- ## 开发
56
+ ### 更新版本
35
57
 
36
58
  ```bash
37
- # 安装依赖
38
- npm install
59
+ # 补丁版本 1.0.0 → 1.0.1
60
+ npm version patch
39
61
 
40
- # 启动开发调试服务器
41
- npm run dev
62
+ # 次版本 1.0.0 → 1.1.0
63
+ npm version minor
42
64
 
43
- # 构建组件库
44
- npm run build
65
+ # 主版本 1.0.0 → 2.0.0
66
+ npm version major
67
+
68
+ # 然后发布
69
+ npm publish --otp=验证码
70
+ ```
71
+
72
+ ---
73
+
74
+ ## 安装
75
+
76
+ ```bash
77
+ npm install n20-project-component
45
78
  ```
46
79
 
47
- ## 添加新组件
80
+ ---
48
81
 
49
- 1. 在 `src/components/` 下创建组件目录：
82
+ ## 使用
83
+
84
+ ### 全量引入
85
+
86
+ 在 `main.js` 中：
87
+
88
+ ```javascript
89
+ import Vue from 'vue'
90
+ import N20Components from 'n20-project-component'
91
+ import 'n20-project-component/dist/n20-project-component.css'
50
92
 
93
+ Vue.use(N20Components)
51
94
  ```
52
- src/components/MyComponent/
53
- └── index.vue
95
+
96
+ 之后在任意 `.vue` 文件中直接使用：
97
+
98
+ ```vue
99
+ <N20CopyText text="BILL-2024-001">BILL-2024-001</N20CopyText>
54
100
  ```
55
101
 
56
- 2. 在 `src/index.js` 中注册导出：
102
+ ### 按需引入
57
103
 
58
104
  ```javascript
59
- import MyComponent from './components/MyComponent/index.vue'
105
+ import { N20CopyText } from 'n20-project-component'
106
+ import 'n20-project-component/dist/n20-project-component.css'
60
107
 
61
- // 添加到 components 对象
62
- const components = {
63
- // ...
64
- MyComponent,
65
- }
108
+ // 全局注册
109
+ Vue.component('N20CopyText', N20CopyText)
66
110
 
67
- // 添加按需导出
68
- export {
69
- // ...
70
- MyComponent,
111
+ // 或在组件内局部注册
112
+ export default {
113
+ components: { N20CopyText }
71
114
  }
72
115
  ```
73
116
 
74
- 3. 在 `examples/App.vue` 中添加调试代码预览效果。
117
+ ---
75
118
 
76
- ## 发布
119
+ ## 本地开发
77
120
 
78
121
  ```bash
79
- # 登录 npm
80
- npm login
122
+ # 安装依赖
123
+ npm install
81
124
 
82
- # 发布
83
- npm publish
84
- ```
125
+ # 启动开发调试（examples 目录）
126
+ npm run dev
85
127
 
86
- ## 依赖要求
128
+ # 构建
129
+ npm run build
130
+ ```
87
131
 
88
- 消费方项目需已安装：
132
+ 新增组件步骤：
89
133
 
90
- - `vue` ^2.6.0
91
- - `element-ui` ^2.15.0
134
+ 1. 在 `src/components/` 下创建组件目录和 `index.vue`
135
+ 2. 在 `src/index.js` 中导入并注册
136
+ 3. 在 `examples/App.vue` 中添加使用示例
137
+ 4. `npm run dev` 调试验证