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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
jquery实现手风琴效果
Nov 20 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
使用Jenkins部署React项目的方法步骤
Mar 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
js中settimeout方法加参数
2014/02/28 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
TypeScript入门-接口
2017/03/30 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
Python类的基础入门知识
2008/11/24 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
一百多行python代码实现抢票助手
2018/09/25 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
生产管理的三大手法
2013/11/11 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
学校献爱心活动总结
2014/07/08 职场文书
文明好少年事迹材料
2014/08/19 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
JavaScript流程控制(分支)
2021/12/06 Javascript
详解Vue3使用axios的配置教程
2022/04/29 Vue.js