vue组件从开发到发布


组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率。更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界。

不想造轮子的工程师,当不了合格的搬运工 。让我们来了解一下vue组件从开发到打包发布流程,并配置Github主页。

本文以 vue-clock2 组件为例,欢迎star^_^~~ 项目地址

  • 目标框架:vue
  • 打包工具:webpack
  • 发布源:npm
  • 代码托管:github

项目结构

  • src: 组件相关代码。
  • node_modules: 组件依赖包。
  • docs: 说明文档,组件简单的可以单个页面,也可以使用vuepress
  • dist: 打包后组件内容,一般 package.json 的 main 入口指向这个文件夹里的文件。

组件开发

vue组件开发相对来讲还是比较容易的,创建一个 vue-clock.vue 文件,组件的相关逻辑实现。

该组件主要实现一个基于 time 属性输入,显示对应时间的钟表样式。

通过元素画出钟表的样式,基于 css3的transform 属性旋转出每个时间点。
因为钟表的时针并不是直接跳到下一个点的,所以需要计算出不同分钟时,时钟指针的旋转角度。
后续增加了不指定时间的情况,显示当前时间并每分钟自动更新。

还有一些钟表的布局样式,可以直接在项目里查看。vue-clock.vue

接着我们需要抛出组件,以便在项目中引入使用。

这里,组件开发的部分已经完成了,喝杯咖啡,check一下代码,我们要把它打包发布到npm上。

打包发布

打包前确认一下 webpack 的配置文件输出。

打包组件文件到 dist 文件夹中。

npm发布

配置package.json

登录npm

如果使用淘宝镜像的,需要先修正一下镜像源。

如果看到类似信息,说明发布成功。

Github主页

把项目上传到github托管,配置一份基本 README.md 说明文档。
因为组件已经发布到npm上,所以可以配置几个徽章在README中。

更多的徽章配置可以查看shields

接着描述一下组件的引入和使用方法:

更详细的交互或是属性说明就交给文档来解决了。
在 github 项目上通过 settings 指定 GitHub Pages

组件文档说明应包括:

  • 组件引入方法
  • 组件使用方法
  • 一个简单的例子
  • 组件属性描述说明

总结

开发 -> 发布 -> 托管

一个组件轮子的制作流程大致介绍完了,希望本文可以帮助到您。

原文链接

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复