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 相关文章推荐
一个JQuery操作Table的代码分享
Mar 30 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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异步执行的详解
2013/06/03 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP多态代码实例
2015/06/26 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
node.js实现上传文件功能
2019/07/15 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
python如何建立全零数组
2020/07/19 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
教师对学生的寄语
2014/04/03 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
北京故宫的导游词
2015/01/31 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android