vue组件从开发到发布的实现步骤


Posted in Javascript onNovember 11, 2018

本文介绍了vue组件从开发到发布的实现步骤,分享给大家,具体如下:

vue组件从开发到发布的实现步骤

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

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

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

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

项目结构

|-- node_modules
|-- src
| |-- index.js
| |-- vue-clock.vue
|-- docs
| |-- index.html
| |-- index.css
|-- dist
  1. src: 组件相关代码。
  2. node_modules: 组件依赖包。
  3. docs: 说明文档,组件简单的可以单个页面,也可以使用vuepress。
  4. dist: 打包后组件内容,一般 package.json 的 main 入口指向这个文件夹里的文件。

组件开发

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

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

<div class="clock">
    <div class="clock-circle"></div>
    <div class="clock-hour" :style="{transform:hourRotate}"></div>
    <div class="clock-minute" :style="{transform:minuteRotate}"></div>
    <b class="hour" v-for="h in timeList" :key="h">
      <span>{{h}}</span>
    </b>
  </div>

通过元素画出钟表的样式,基于 css3的transform 属性旋转出每个时间点。

因为钟表的时针并不是直接跳到下一个点的,所以需要计算出不同分钟时,时钟指针的旋转角度。

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

export default {
  data() {
    return {
      timeList: [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
      hourRotate: "rotatez(0deg)",
      minuteRotate: "rotatez(0deg)"
    };
  },
  props: ["time"],
  watch: {
    time() {
      this.show();
    }
  },
  methods: {
    show() {
      this.showTime();
      if (this._timer) clearInterval(this._timer);
      if (!this.time) {
        this._timer = setInterval(() => {
          this.showTime();
        }, 60 * 1000);
      }
    },
    showTime() {
      let times;
      if (this.time) {
        times = this.time.split(":");
      } else {
        const now = new Date();
        times = [now.getHours(), now.getMinutes()];
      }

      let hour = +times[0];
      hour = hour > 11 ? hour - 12 : hour;
      let minute = +times[1];
      let hourAngle = hour * 30 + minute * 6 / 360 * 30;
      let minuteAngle = minute * 6;
      this.hourRotate = `rotatez(${hourAngle}deg)`;
      this.minuteRotate = `rotatez(${minuteAngle}deg)`;
    }
  },
  mounted() {
    this.show();
  },
  destroyed() {
    if (this._timer) clearInterval(this._timer);
  }
};

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

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

// src/index.js
  import Clock from './vue-clock.vue';
  export default Clock;
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.component('clock', Clock);
  }

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

打包发布

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

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'vue-clock.min.js',
  library: 'Clock',
  libraryTarget: 'umd',
  umdNamedDefine: true
 }

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

npm run build

npm发布

配置package.json

{
 "name": "vue-clock2",
 "description": "Vue component with clock",
 "version": "1.1.2",
 "author": "bestvist",
 "keywords": [
  "vue",
  "component",
  "clock",
  "time"
 ],
 "main": "dist/vue-clock.min.js",
 "license": "MIT",
 "homepage": "https://bestvist.github.io/vue-clock2/"
}

登录npm

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

npm config set registry https://registry.npmjs.org/
// 查看登录人
npm whoami
// 登录
npm login

// 发布
npm publish

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

npm notice
+ vue-clock2@1.1.2

Github主页

把项目上传到github托管,配置一份基本 README.md 说明文档。

因为组件已经发布到npm上,所以可以配置几个徽章在README中。

// npm 版本
[npm version](https://img.shields.io/npm/v/vue-clock2.svg)

// npm 下载量
[npm download](https://img.shields.io/npm/dt/vue-clock2.svg)

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

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

安装:

npm install vue-clock2

使用:

<template>
 <clock :time="time"></clock>
</template>

<script>
 import Clock from 'vue-clock2';
 export default {
  components: { Clock },
  data () {
   return {
     time: '10:40'
   }
  }
 }
</script>

更详细的交互或是属性说明就交给文档来解决了。

在 github 项目上通过 settings 指定 GitHub Pages

vue组件从开发到发布的实现步骤

组件文档说明应包括:

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

总结

开发 -> 发布 -> 托管

一个组件轮子的制作流程大致介绍完了,希望本文可以帮助到您。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 #Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python分析网页上所有超链接的方法
2015/05/08 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python返回数组/List长度的实例
2018/06/23 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
自我评价个人范文
2013/12/16 职场文书
销售人员获奖感言
2014/02/05 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
校长师德表现自我评价
2015/03/05 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Python中re模块的元字符使用小结
2022/04/07 Python