vue组件从开发到发布的实现步骤

|-- node_modules
|-- src
| |-- index.js
| |-- vue-clock.vue
|-- docs
| |-- index.html
| |-- index.css
|-- dist

  <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>

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 "_blank" href="https://github.com/bestvist/vue-clock2/blob/master/src/vue-clock.vue" rel="external nofollow" >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

组件文档说明应包括：

  
组件引入方法
  
组件使用方法
  
一个简单的例子
  
组件属性描述说明

总结


开发 -> 发布 -> 托管
一个组件轮子的制作流程大致介绍完了，希望本文可以帮助到您。也希望大家多多支持。