One of the most important aspects of team development is code specification and usage

Problem: During the development of a project or multiple projects in a company, there will be a variety of the same components, resulting in one on the left, one on the right, when the requirements change, the left turns red to green, click on it to hover, and the right does not know. Even for A round robin function, colleague A references plug-in 1, and colleague B references plug-in 1.1 or another plug-in.

A: Administrative costs are rising

B: Project resource redundancy

Solution: When encountering common components, encapsulate these components to preserve UI consistency and logical consistency.

Let’s start the development of a Vue component (more features of the simplified version need to be added to the Webpack configuration)

  • Build a company common component library project
  • Start the development of Vue components (vuE-CLI3 must be installed)
  • Cli.vuejs.org/zh/guide/in…
Use the terminal to access the current directory and run the vue serve test.vue commandCopy the code

Can start development into, into the local browser address can see the test component

Some simple development in test.vue completes component development

Other Vue directives or filters that have generality are developed in test.js

/ * * @ Description: entrance of the vue plug-in packaging file * @ Author: wen-zhou wu * @ making: https://github.com/fodelf * @ the Date: 2019-10-19 17:35:27 * @lasteditors: @lastedittime: 2019-10-19 17:59:27 */ importtest 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) {// Register components, if multiple components please use file read form Vue.component('text-test'.test// Vue. Filter ('parseTime'.function(value) {
    // let time = value ? dateFormat(value * 1, 'yyyy-MM-dd') : ' '
    returnTime}) // General custom instruction // the amount field can only enter two decimal digits // use method 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
}
Copy the code

  • Package uploaded to private zhuanlan.zhihu.com/p/86949640 warehouse
Package command -t lib Package to a -n librarytestThe package js name will be used in package.json to get vue build-t lib-ntest test.jsCopy the code

Configuration package

{// Especially important names do not duplicate existing NPM package names"name": "test"."description": "Wu Wen Chow test kit", // It is especially important to change the version number before each upload"version": "1.0.0"."author": "https://github.com/fodelf"// Especially important to configure the input file path each time the package -n name must be the same or change the path"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": {}}Copy the code

To upload

Go to the current project directorycdXx NPM login Enter the user name and password NPM publish publishCopy the code

  • For use in projects
Enter the application projectcd xx
npm i testImport from main.js, the main entry of the vue projecttest from 'test'
Vue.use(test)Copy the code

Git address

Github.com/fodelf/Vue-…

github.com