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 相关文章推荐
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
打架检讨书50字
2014/01/11 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
给客户的检讨书
2014/12/21 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
python三子棋游戏
2022/05/04 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript