Vue Components package NPM

Project Environment

• init Vue project

      Vue create my-app
  

• run project

      npm run serve
  

Component encapsulation

• Create a package folder. Because we may need to packaging multiple components, so we can create a package folder under src to store all components that we want to upload to npm.

  - Under package folder, we can init a pig-button/index.vue component.
      ```html
          <template>
                <div>
                <button>test</button>
                </div>
        </template>
  
        <script>
        export default {
        name: "pig-button",
        };
        </script>
  
        <style scoped>
            button {
                width: 100px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                border-radius: 10px;
                cursor: pointer;
            }
        </style>
    ```
  

• Use Vue plugin mode This is a very important step. Vue provides a public method:install. This method can be call when user use Vue.use(plugin). And it also let our plugin register to global, and we can use it in anywhere.

  • Under package folder, we also need to create a index.js file.

    // package/index.js
    // import the component
    import PigButton from "../package/pig-button/index.vue";
    // all components can be added into this array.
    const coms = [PigButton];
    
    // Batch component registration
    const install = function (Vue) {
      coms.forEach((com) => {
        Vue.component(com.name, com);
      });
    };
    
    export default install;
    

Packaging components

• Modify package.json

  {
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "package": "vue-cli-service build --target lib ./src/package/index.js --name pig-ui --dest pig-ui"
    }
  }
  

  --target lib: To identify entry file for packaging --name: To identify project file name after packaging --dest: To identify project folder name after packaging

• Packaging

      npm run package
  

Publish to NPM

• init a package.json in dist folder(pig-ui)

  cd pig-ui
  npm init -y
  

  • under package.json

  {
    "name": "pig-ui-demo-vue",
    "version": "1.0.0",
    "description": "",
    "main": "pig-ui.common.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "LinkunGao",
    "license": "ISC"
  }
  

• upload steps

  1. Register a NPM account.

  2. If the people needs npm mirror source

         npm config set registry=https://registry.npmjs.org
     

  3. Add npm user

         cd pig-ui
         npm  adduser
     

  4. npm publish

      npm publish
  

Test

1. Create a vue project and install the package

       npm i pig-ui-demo-vue
   

2. Under Vue project main.js,

   import { createApp } from "vue";
   // import Vue from "vue";
   import App from "./App.vue";
   import PigUI from "pig-ui-demo-vue";
   import "pig-ui-demo-vue/pig-ui.css";
   
   // Vue.use(PigUi);
   createApp(App).use(PigUI).mount("#app");
   

3. Under App.vue

   <template>
     <div>
       <img alt="Vue logo" src="./assets/logo.png" />
       <pig-button></pig-button>
     </div>
   </template>
   
   <script>
     export default {
       name: "App",
     };
   </script>