bestvist 2018-10-15
梳理一篇 vue 组件从开发到发布托管流程.
组件化是前端开发非常重要的一部分, 从业务中解耦出来, 可以提高项目的代码复用率. 更重要的是我们还可以打包发布, 俗话说集体的力量是伟大的, 正因为有许许多多的开源贡献者, 才有了现在的世界.
不想造轮子的工程师, 当不了合格的搬运工 . 让我们来了解一下 vue 组件从开发到打包发布流程, 并配置 GitHub 主页.
本文以 vue-clock2 组件为例, 欢迎 star^_^~~ 项目地址 https://github.com/bestvist/vue-clock2
目标框架: vue
打包工具: webpack
发布源: NPM
代码托管: GitHub
项目结构
src: 组件相关代码.
node_modules: 组件依赖包.
docs: 说明文档, 组件简单的可以单个页面, 也可以使用 https://www.vuepress.cn/ .
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);
- }
- };
还有一些钟表的布局样式, 可以直接在项目里查看.
接着我们需要抛出组件, 以便在项目中引入使用.
- // src/index.JS
- import Clock from './vue-clock.vue';
- export default Clock;
- if (typeof Windows !== 'undefined' && Windows.Vue) {
- Windows.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)
更多的徽章配置可以查看 https://shields.io/#/
接着描述一下组件的引入和使用方法:
安装:
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
组件文档说明应包括:
组件引入方法
组件使用方法
一个简单的例子
组件属性描述说明
总结
开发 -> 发布 -> 托管
一个组件轮子的制作流程大致介绍完了, 希望本文可以帮助到您.
来源: https://juejin.im/entry/5bc499196fb9a05cd53b29fd