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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
vue实现简单数据双向绑定
Apr 28 Vue.js
React四级菜单的实现
Apr 08 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
详解如何在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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
jquery 选择器部分整理
2009/10/28 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python3爬取数据至mysql的方法
2018/06/26 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python装饰器代码深入讲解
2021/03/01 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
职位说明书范文
2014/05/07 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公司员工手册范本
2015/05/14 职场文书
南京大屠杀观后感
2015/06/02 职场文书
会议简讯范文
2015/07/20 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MySQL连接控制插件介绍
2021/09/25 MySQL
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS