1. Pay attention to

This article mainly simulates packaging components and common utils into NPM. The result is that the package is searchable by anyone on the NPM platform. It’s a shared behavior, it’s public! The method is more suitable for individuals or companies willing to expose some stable packages for common use and long-term maintenance

Not applicable: Assuming that our company has several projects with many duplicate components, Utils wants to reduce code reuse and maintenance costs, so the establishment of NPM private storage is only for internal use of the project, not to be disclosed. This should never be sent to the public platform. You can refer to the use of Verdaccio to build NPM private storage

2. Process of packaging into NPM package (VUE page code)

2.1 VUE page code

The parent page

<template>
  <div id="app">
    <welcome
      title="Home page"
    />
  </div>
</template>

<script>
import welcome from './components/welcome.vue'
export default {
  components: {
     welcome,
  },
  name: 'App',}</script>
Copy the code

Child page – The public component Welcome

<template>
  <div class="each-page-title">Welcome to {{title}}</div>
</template>
<script>
export default {
  props: {
    title: {
      type: String.required: true,}}}</script>

<style scoped>
  .each-page-title {
    text-align: center;
    color: red;
    background-color: yellowgreen;
  }
</style>
Copy the code

2.2 Packaging vUE Components into NPM
1 Create package bingxixi-common-title-> Create SRC -> initialize
Mkdir bingxixi-common-title here is the package name, I was created by project name + function CD bingxixi-common-title mkdir SRC We're going to put our welcome.vue in SRC, and we're going to put it in NPM init if the file name is ok, then we're going to enter itCopy the code
2. Create an index.js file at the same level as SRC
import welcome from './src/welcome'
export default welcome
Copy the code
3. Create an NPM account and verify the email address

Enter the official website, input account, password, email, and to record here, if you receive an email, go to the email to verify, or in the login can not go to check the email needs to verify (email must be verified)

4. Official release

Git operation under the bingxixi-common-title file

NPM login # If your company has its own default NPM warehouse or use taobao image, note that you need to specify the warehouse address;`npm login --registry=https://registry.npmjs.org`Let you enter your username, password, and email in turnUsername: 
Password: 
Email: (this IS public)

npm publish --registry=https://registry.npmjs.org
Copy the code

That’s release success

5. The query

1. Log in to the NPM account

2. Search the bag directly on NPM

3. Download it directly from the project, go to package.json

npm i bingxixi-common-title

6. How to use this package in vue

1. Install

npm i bingxixi-common-title --save
Copy the code

2.main.js, and global registration

import welcome from 'bingxixi-common-title'
Vue.component('welcome', welcome);
Copy the code

3. The public component just now is not needed, only the parent page parent page code is retained

<template>
  <div id="app">
    <welcome
      title="Home page"
    />
  </div>
</template>

Copy the code
7. How to update the package and add the MD file

1 Create a readme. md file and write it to the specification, using Markdown

These instructions, you can find them in NPM, you can look at what people have written, you can change them, okay

2. Update packages

npm version patch
npm publish --registry=https://registry.npmjs.org
Copy the code

Note: NPM version patch is in your original version number, say v1.0.0, it will add 1 to the base, if your version is not + 1, you can manually change package.json without NPM version patch, and then NPM publish –registry=https://registry.npmjs.org

8. How do I avoid having to type –registry=registry.npmjs.org
Use the NPM config edit command to change the following location to Registry = HTTPS://registry.npmjs.orgIn the future, you don't have to run the command to add this sentence every time you pullCopy the code

3.2. Process of packaging into NPM package (utils code)

3.1 Vue page code and utils

Vue page

<template>
  <div id="app">
    call me : {{ userPrivate(phone) }}
    <br>Your contribution is {{money}}, with a total of {{userPrivate(money)}} digits</div>
</template>

<script>
import { userPrivate, getNumBit } from './utils/index'
export default {
  name: 'App'.data() {
    return {
      phone: 18819168888.money: 12345.88,
      userPrivate,
      getNumBit,
    }
  }
}
</script>
Copy the code

utils

 /** * Encrypted display of user's mobile phone information *@param { Number, String } Phone User's mobile phone/account */
module.exports = {
  // Encrypt the phone number
  userPrivate(phone) {
    const phoneStr = String(phone)
    if(! phone || phoneStr.length <11) return phone
    const privateIndex = phoneStr.indexOf('86') > -1 ? 5 : 3
    return `${phoneStr.substring(0, privateIndex)}* * * *${
    phoneStr.substring(privateIndex + 4, phoneStr.length)}`
  },
  // Get the integer bit length of the number
  getNumBit(num) {
    let intNum = num.toFixed(0);
    returnintNum.length; }}Copy the code

2.2 Package Utils into NPM
1 create bingxixi-common-utils-> put utils index.js under bingxixi-common-title -> initialize
Mkdir bingxixi-common-utils here is the package name, I'm made up of project name + function CD bingxixi-common-utils NPM init here if the file name is ok, just enter itCopy the code
3.4.5.7 Same as above
6. How to use this package in vue

1. Install

npm i bingxixi-common-utils --save
Copy the code

2.main.js, and global registration

import { userPrivate, getNumBit } from 'bingxixi-common-utils'
Vue.prototype.$userPrivate = userPrivate
Vue.prototype.$getNumBit = getNumBit
Copy the code

3. Page code

<template>
  <div id="app">
    call me : {{ $userPrivate(phone) }}
    <br>Your contribution is {{money}}, with a total of {{$userPrivate(money)}} digits</div>
</template>

<script>
export default {
  name: 'App'.data() {
    return {
      phone: 18819168888.money: 12345.88,}}}</script>
Copy the code
7. Add the MD file

3. The end

It is recommended to release an NPM package from 0 to 1