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

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

A：管理成本上升

B：项目资源冗余

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

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

• 构建一个公司公共的组件库项目

• 开始Vue组件的开发(重要必须安装Vue-cli3)
• cli.vuejs.org/zh/guide/in…

   使用终端进入当前目录
   执行命令 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
}

• 打包上传到私有仓库 zhuanlan.zhihu.com/p/86949640

打包命令
-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