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 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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 短链接算法收集与分析
2011/12/30 PHP
smarty中post用法实例
2014/11/28 PHP
php数组键名技巧小结
2015/02/17 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python flask中静态文件的管理方法
2018/03/20 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
化学实验员岗位职责
2013/12/28 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫