本文介绍了vue组件从开发到发布的实现步骤，与大家分享如下：

组件化是前端开发非常重要的一部分。与业务脱钩可以提高项目的代码重用率。更重要的是，我们还可以打包发布。俗话说，集体力量大，正是因为有很多开源贡献者，才有了现在的世界。

不想造轮子的工程师不可能是合格的搬运工。让我们看看vue组件从开发到打包发布的流程，配置Github主页。

本文以vue-clock2组件为例，对star _~~项目的地址表示欢迎

目标框架：vue打包工具：webpack发布来源：npm代码托管：github项目结构

|-node _ modules |-src | |-index . js | |-vue-clock . vue |-docs | |-index . html | |-index . CSS |-distsrc :组件相关代码。Node_modules:组件依赖包。Docs:文档，组件可以简单到单个页面，也可以使用vuepress。对于dist:打包组件内容，package.json的主条目一般指向这个文件夹中的文件。组件开发

开发vue组件相对容易。创建一个vue-clock.vue文件，实现组件的相关逻辑。

该组件主要实现基于时间属性输入的时钟样式，并显示相应的时间。

Div class=' clock ' Div class=' clock-circle '/Div class=' clock-hour ' : style=' { transform : hour rotate } '/Div class=' clock-minute ' : style=' { transform : minute rotate } '/Div b class=' hour ' v-for=' h in time list ' : key=' h ' span { { h } }/span/Div基于绘制通过元素的时钟样式

由于时钟的时针并不直接跳到下一点，所以需要计算不同分钟时针的旋转角度。

随后，增加了不指定时间的情况，每分钟显示并自动更新当前时间。

导出默认{ data(){ return { timelist :[12，1，2，3，4，5，6，7，8，9，10，11]，hourotatez : ' rotatez(0 deg)'，minutrotatez : ' rotatez(0 deg)' }；}，props: ['time']，watch : { time(){ this . show()；} }，methods : { show(){ this . show time()；如果(这个。_timer) clearInterval(这。_ timer)；if(！这个。_ timer=setInterval(()={ this . show time()；}, 60 * 1000);} }，show time(){ let times；if(this . time){ times=this . time . split(' : ')；} else { const now=new Date()；times=[now.getHours()、now . getminutes()]；} let hour=times[0]；小时=11小时？小时- 12 :小时；让分钟=时间[1]；设hourAngle=小时* 30分钟* 6/360 * 30；让minute angle=minute * 6；this . hour rotate=` rotatez($ { hour angle } deg)`；this . minute rotate=` rotatez($ { minute angle } deg)`；} }，mounted(){ this . show()；}，销毁了(){ if (this。_timer) clearInterval(这。_ timer)；}};还有一些时钟布局样式可以在项目中直接查看。vue-clock.vue

接下来，我们需要抛出组件来介绍项目中的用途。

//src/index.js从“”导入时钟。/vue-clock . vue '；导出默认时钟；if(窗口类型！==“未定义”窗口。Vue) { window。Vue.component('clock '，Clock)；}这里，组件开发的部分已经完成。喝杯咖啡，检查一下代码，我们会打包发布给npm。

打包并发布

打包前检查webpack的配置文件输出。

output : { path : path . resolve(_ _ dirname，'。/dist ')，publicPath: '/dist/'，filename: 'vue-clock.min.js '，library: 'Clock '，library目标：' UMD '，umdnameddefine : true}将组件文件打包到dist文件夹中。

Npm运行buildnpm版本

配置package.json

{ 'name': 'vue-clock2 '，' description': 'Vue组件带时钟'，' version': '1.1.2 '，' author': 'bestvist '，' keywords': [ 'vue '，component '，' clock '，' time']，' main ' : ' dist/Vue-clock . min . js '，' license ' : ' MIT '，' home page ' 33: ' https://bestvist.github.io/vue-.

如果使用淘宝镜像，需要先修正镜像源。

检查登录npm whoami//登录npm登录//发布npm由npm配置集注册中心https://registry.npmjs.org///.发布如果看到类似信息，则发布成功。

Npm通知[电子邮件保护] github主页

将项目上传到github hosting并配置一个基本的README.md描述文档。

由于该组件已发布到npm，因此可以在README中配置几个徽章。

//npm版本[NPM版本](https://img . shields . io/NPM/v/vue-clock 2 . SVG)//NPM下载[NPM下载](https://img.shields.io/NPM/dt/vue-clock2.svg)更多

然后描述组件的介绍和使用：

安装：

使用npm安装vue-clock2:

模板时钟： time=' time '/Clock/template script从' vue-clock2 '导入时钟；导出默认{ components: { clock }，data(){ return { time 3360 ' 10336040 ' }/脚本。更详细的交互或属性描述将提交给文档。

通过github项目上的设置指定GitHub页面

组件文档应包括：

组件介绍方法组件使用方法的简单示例组件属性描述描述摘要

开发-发布-宿主

已经粗略地介绍了部件轮的制造过程。希望这篇文章能对你有所帮助。也希望大家多多支持我们。