专栏首页吴文周的专栏前端-团队效率(五)开发一个Vue插件

前端-团队效率(五)开发一个Vue插件

团队开发中最为重要一点的就是代码规范与使用

问题:一个项目的开发过程中或者一个公司的多个项目中都会各种相同的组件,结果左写一个,右写一个,需求变化后,左把红色变成绿色,点击变成悬浮,右还不知道。乃至于一个轮播功能A同事引用了插件1,B同事引用了插件1.1或者另一个插件。

A:管理成本上升

B:项目资源冗余

解决:遇到公共的组件,把这些组件封装就可以保存UI的一致性,逻辑的一致性。

下面我们开始一个Vue组件的开发吧(至简版更多功能需要加入webpack配置)

  • 构建一个公司公共的组件库项目
   使用终端进入当前目录
   执行命令 vue serve test.vue 

即可开始开发进入,进入了本地浏览器地址即可看见测试组件

在test.vue中进行一些简单的开发即可完成组件开发

还有一些Vue指令或者过滤器有通用性的就在test.js中开发

/*
 * @Description: vue插件打包的入口文件
 * @Author: 吴文周
 * @Github: https://github.com/fodelf
 * @Date: 2019-10-19 17:35:27
 * @LastEditors: 吴文周
 * @LastEditTime: 2019-10-19 17:59:27
 */
import test from './test.vue'
//多文件读取形式
// const viewModulesFiles = require.context('@/components/Charts', false, /\.vue$/)
// const viewModules = viewModulesFiles
//   .keys()
//   .reduce((viewModules, modulePath) => {
//     const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
//     const value = viewModulesFiles(modulePath)
//     viewModules[moduleName] = value.default
//     return viewModules
//   }, {})
const install = function(Vue) {
  //注册组件,如果是多个组件请用文件读取的形式
  Vue.component('text-test', test)
  //通用过滤器
  Vue.filter('parseTime', function(value) {
    // let time = value ? dateFormat(value * 1, 'yyyy-MM-dd') : ''
    return time
  })
  //通用自定义指令
  // 金额字段只能输入两位小数
  // 使用方法v-Number="{set:this,name:'form.table.allowanceNumber'}"
  Vue.directive('Number', {
    inserted: function(el, binding) {
      el.querySelectorAll('.el-input__inner')[0].addEventListener(
        'keyup',
        function(event) {
          var dom = event.currentTarget
          dom.value =
            dom.value.replace(/\D/g, '') !== '0'
              ? dom.value.replace(/\D/g, '')
              : ''
          let keyArry = binding.value.name.split('.')
          let len = 0
          let lenArry = keyArry.length - 1
          function match(obj) {
            if (len < lenArry) {
              len = len + 1
              match(obj[keyArry[len - 1]])
            } else if (len === lenArry) {
              obj[keyArry[len]] = dom.value
            }
          }
          match(binding.value.set)
        }
      )
    }
  })
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  version: '1.0.0',
  install
}
打包命令
-t lib打包形式打包成库 
-n test 给打包出来的js命名在之后的上传中用到package.json中使用得到
vue build -t lib -n test test.js

配置package

{
  //特别重要 名字不要跟已有的npm包名重复
  "name": "test",
  "description": "吴文周测试组件",
  //特别重要 每次上传前都要修改版本号
  "version": "1.0.0",
  "author": "https://github.com/fodelf",
  //特别重要 配置录入文件路径每次打包时-n 的名字要一致否则要改这个路径
  "main": "dist/test.umd.min.js",
  "license": "MIT",
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fodelf/xx/xx.git"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "keywords": [
    "vue",
    "test"
  ],
  "homepage": "https://github.com/fodelf/xx/README.md",
  "devDependencies": {}
}

开始上传

进入当前项目目录
cd xx
npm login 输入用户名密码
npm publish 发布
  • 在项目中使用
进入应用项目
cd xx
npm i test
在vue项目的主入口js中main.js中
import test from 'test'
Vue.use(test)

代码git地址

https://github.com/fodelf/Vue-Plugin-Demo​

github.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 团队效率-基建开源(持续更新)

    吴文周
  • 前端-团队效率(一)流程设计

    吴文周
  • 辅助工作-内网穿透客户端(限Mac)

    吴文周
  • 前端|初学vue

    Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三...

    算法与编程之美
  • Vue常用特性

    a)、Input单行文本。   b)、textarea多行文本。   c)、select下拉多选。   d)、radio单选框。   e)、checkbox多选...

    别先生
  • 在webpack中配置vue.js

    Dream城堡
  • 【前端词典】Vuex 注入 Vue 生命周期的过程

    这篇文章是【前端词典】系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解。当然这些文章的前提...

    小生方勤
  • Android面向切面AOP架构设计后续补充

    假设 test 类里有使用到 @aop 的切点注解,那么我们在混淆文件中就应该 -keep 这个 test 类

    萬物並作吾以觀復
  • FFmpeg简易播放器的实现-视频播放

    下图引用自“雷霄骅,视音频编解码技术零基础学习方法”,因原图太小,看不太清楚,故重新制作了一张图片。

    用户4940323
  • vue笔记

    https://github.com/vuejs/vue-devtools#vue-devtools

    lilugirl

扫码关注云+社区

领取腾讯云代金券