wdc-vue-components

伟东云 vue 组件库

使用文档

npm i git+http://gitlab.wdcloud.cc:10080/front-end/wdc-vue-components.git --save

// 方法一，该方案会导致所有组件都被打包
import { WdcEditor } from "wdc-vue-components";

// 方法二，该方案只会打包单个组件
import WdcEditor from "wdc-vue-components/src/components/editor";

组件列表

| 名称 | 说明 | 负责人 | 文档 | | ------------------- | ---------------- | ------ | ------------------------------------------- | | wdc-editor | 富文本编辑器 | 薛帅超 | 点我 | | aliplayer | 阿里云视频播放器 | 吴红月 | 点我 | | aliyun-upload-video | 阿里云视频上传 | 李文彪 | 点我 | | wdc-upload-image | 图片上传 | 李文彪 | 点我 |

开发文档

npm 命令

开发服务：npm run dev

代码检查: npm run lint

开发规范

• Git 规范
• HTML 规范
• JavaScript 规范

目录说明

example 组件的示例目录，供开发调试使用

src 组件代码目录，组件代码放在此目录下

NPM 包（模块）测试、发布、更新、撤销发布

测试

publish 前测试

调试时使用 npm link npm link 可以让项目和要使用的 npm 包之间建立符号连接。 换句话说，如果在项目 A 中使用组件包 B，之前要把 B 发布，然后项目 A 安装 B，才能验证，现在只需要 A 打包就可验证（A 打包时获取的是 B 在本地的文件, 即写在 B package.json 中的 main 文件）

而要使用 npm link, 要做到如下几步：

在B包里：
npm link // 相当于npm install B -g
在A包里：
npm link B // 代码无需修改，package.json中引用B的包会自动指向本地B的打包文件

使用 npm link 的方式，所有的小调整都不需要发包就可以验证正确性，尤其是对于不能确定正确的测试性改动，更加具有优越性。

发布和更新

发布前要注意，如果之前设置过淘宝镜像，需要再设置回来初始源 通过 npm config list 来查看当前的源

$ npm config list
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"

通过 npm config set registry https://registry.npmjs.org 设置回原来的源。

1.先登录，执行

npm login

Username:fe-wdcloud
Password:wdcloud-fe
Email:[email protected]

2.发布和更新

发布包和更新包的命令是一样的，更新包只需修改 package.json 里面的 version 字段，也可以使用 npm 自带的版本控制命令修改版本号，更新的步骤为：

1. 修改版本号
2. npm publish

3.发布时使用 tag

tag 可以用来指带版本号，用户可以使用 npm install @安装 对于绝大部分用户，都是用 npm install 来安装所有依赖的，这种情况下，系统会自动安装最新的版本号，需要注意的是，我们会经常发出测试版本，这时候用户如果安装，那么就会拉取到一个有问题的测试版本，所以我们需要使用 tag 来区分版本。

另外，在联调阶段，反复告知对方，我们的版本号从 1.3.1 改成 1.3.x 了是很蠢的，所以可以指定一个 tag 维持版本的传递。同时，在 B 包里使用 npm info 来观察各个 tag 的版本号。

使用 latest 来设置用户 npm install 默认安装的版本，使用 alpha 来设置测试版本，当测试版本测试完毕之后，使用

npm dist-tag add <pkg>@<version> [<tag>]

来切换不同 tag 的版本号，例如，1.3.1 已经测试完成，我们可以使用 npm dist-tag add [email protected] latest 来把原本属于 alpha 的分支切到 latest。tag 不加的话默认是 latest。

修改版本号的两种方式，

1.手动修改 package.json 里面的 version 字段 2.通过 npm version 命令修改版本号 npm 提供官方提供了 npm version 来进行版本控制，其效果跟手动修改 package.json 里面的 version 字段是一样的，好处在于，可以在构建过程中用 npm version 命令自动修改，而且具有语义化即 Semantic versioning.

npm version [<newversion> | major | minor | patch | premajor | preminor |
prepatch | prerelease | from-git]

其语义为：

major：主版本号（大版本）
minor：次版本号（小更新）
patch：补丁号（补丁）
premajor：预备主版本
preminor: 预备次版本
prepatch：预备补丁版本
prerelease：预发布版本

如初始版本为 1.0.0，执行相关类型命令后，对应的语意为：

npm version patch  // 1.0.1 表示小的bug修复
npm version minor // 1.1.0 表示新增一些小功能
npm version mmajor // 2.0.0 表示大的版本或大升级
npm version preminor // 1.1.0-0 后面多了个0，表示预发布

最佳实践：

1.将 wdc-vue-components 组件 clone 到本地 2.执行 npm link // 相当于 相当于 npm install wdc-vue-components -g 3.在发布之前需要在项目 B 中测试开发的包，所以在项目中执行

npm link wdc-vue-components

此时如果包更新，项目 B 在打包时会将最新的更改打包进去，避免了发布包和在项目中重新安装的过程。

4.如果包调试完毕，可以发布

npm version patch //更新版本，如果之前版本时1.0.0，执行完后到1.0.1
npm publish // 此时默认的tag是latest

5.在项目 B 中使用 latest 来设置用户 npm install 默认安装的版本,保持下载最新包

"wdc-vue-components": "latest"

6.我们也可以指定一个 tag(alpha)来发布测试包，如果测试完毕后再将其转为生产 tag

npm publish --tag alpha
npm dist-tag add <pkg>@<version> [<tag>]

例如，1.3.1 已经测试完成，我们可以使用

npm dist-tag add [email protected] latest

来把原本属于 alpha 的分支切到 latest。tag 不加的话默认是 latest。

7.通过 npm info 查看各个 tag 的版本号

撤销发布

由于撤销发布会让把要撤销的包作为依赖的包不能正常工作，所以 npm 官方对包的撤销是有限制的：

1. 不允许撤销发布已经超过 24 小时的包
2. 如果在 24 小时内确实要撤销，需要加--force 参数
3. 即使撤销了发布的包，再次发布的时候也不能与之前被撤销的包的名称/版本其中之一相同，因为这两者构成的唯一性已经被占用，官方并没有随着撤销而删除

撤销发布的命令为 npm unpublish

npm unpublish wdc-vue-components
npm unpublish wdc-vue-components --force

♢ npm deprecate npm unpublish 的推荐替代命令：

npm deprecate <pkg>[@<version>] <message>

这个命令，并不会在 npm 上里撤销已有的包，但会在任何人尝试安装这个包的时候得到 deprecated 的警告，例如：

npm deprecate my-test-project 'this package is no longer maintained'