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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
React实现全选功能
Aug 25 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 不同编码下的字符串长度区分
2009/09/26 PHP
php生成短网址示例
2014/05/05 PHP
php实现插入排序
2015/03/29 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python3爬取各类天气信息
2018/02/24 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python——全排列数的生成方式
2020/02/26 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
就业自我评价
2014/02/04 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
经典演讲稿开场白
2014/08/25 职场文书
雷锋的观后感
2015/06/10 职场文书
新闻通讯稿模板
2015/07/22 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript