preface

Component encapsulation is a routine operation when developing with the Vue framework. A packaged component can be used anywhere in the project, or even downloaded from an NPM repository, such as iView, Element-UI, etc. But every company business scenario may be different, developer, or must be encapsulated component, if in a project, then we can copy the component code into a new project, so a bit of trouble, in fact, we can upload form to NPM warehouse, can be used directly from the NPM install it when you are going to use it.

There are two advantages:

  • Aspects are used to seamlessly connect any project.
  • As an open source project, gain experience.

1. Environment preparation

Because we are packaging Vue components this time, we can directly package in the Vue scaffolding project.

(1) Initialize the Vue project

vue create my-app
Copy the code

(2) Run the project

npm run serve
Copy the code

2. Component encapsulation

2.1 Creating a Package folder

Since we may package multiple components, create a package folder under SRC to hold all the components that need to be uploaded.

Here we intend to encapsulate two components: pig-button and pig-input, so we create a new folder under the Package folder to store the code for both components.

2.2 Writing component code

Let’s take the Pig-button component as an example and write a bit of arbitrary code as follows:

//package/pig-button/index.vue <template> <div> <button> </template> <script> export default { Name: "pig-button", // component name}; </script> <style scoped> button { width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 10px; cursor: pointer; } </style>Copy the code

Then we reference the app. vue component to verify whether the component is available. The code is as follows:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <pig-button></pig-button>
  </div>
</template>

<script>
import PigButton from './package/pig-button/index.vue'

export default {
  name: 'App',
  components: {
    PigButton
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
Copy the code

The final effect will look like this:

2.3 Using the Vue plug-in mode

This step is the focus of component encapsulation and uses a public method provided by Vue: Install. This method is called when you use vue.use (plugin), which makes our plugin globally registered and available anywhere in the child component.

Create a new index.js file in the package directory as follows:

//package/index.js import PigButton from ".. /package/pig-button/index.vue"; Const coms = [PigButton]; Const install = function (Vue) {coms.foreach ((com) => {Vue.component(com.name, com);  }); }; export default install; // This method can be called by use when used laterCopy the code

One of the main tasks of the upload code is to register our wrapped component as a global component, using the Vue.component() method. When using vue.use (), our install method will execute.

3. Pack components

At this point, our component feudalism is basically complete, of course, the packaging of components depends on your business needs, then we need to package components.

Modify the package.json file of our project and configure the packaging command:

"package": "vue-cli-service build --target lib ./src/package/index.js --name pig-ui --dest pig-ui"
Copy the code

Package command description:

  • The –target lib keyword specifies the directory to package
  • –name Name of the packaged file
  • Dest Specifies the name of the folder to be packed

Then execute the package command:

npm run package
Copy the code

When the package is complete, we will have a pig-UI folder in our project directory, which will hold the packaged files.

4. Publish to NPM

4.1 Initializing package.json

To publish to the NPM repository, we also need to initialize a package.json file in the Pig-UI folder. Go to pig-ui and run the following command:

npm init -y
Copy the code

Since we’re just testing here, I don’t need to change the package.json file. If it’s production, it’s better to add the version description, version number, etc., where the name field is the name we uploaded to the NPM repository.

4.2 Publish to the NPM repository

(1) Register an account

If you want to publish to NPM warehouse, you must have an account, first go to NPM official website to register an account, pay attention to remember the user name, password and email, may be used when publishing.

(2) Set the NPM source

Some partners may use the local NPM mirror source is Taobao mirror source or other, if you want to release NPM package, we have to switch our NPM source to the official source, the command is as follows:

npm config set registry=https://registry.npmjs.org
Copy the code

(3) Add the NPM user

Go to pig-ui, add user NPM, and run:

npm adduser
Copy the code

This will ask you to fill in your username and so on, so skip this step if you’ve done this before.

(4) Release NPM

Run the following command in pig-ui:

npm publish
Copy the code

If the release fails, it may be because the name is repeated, so change the name. After the release succeeds, we can go to the NPM optical network to check the NPM package we published:

5. Install it from NPM

Directly execute the installation command:

NPM install pig-ui-testCopy the code

Then register with the main.js reference as follows:

import PigUi from "pig-ui-test"; import ".. /node_modules/pig-ui-test/pig-ui.css"; Vue.use(PigUi);Copy the code

There is a separate reference to CSS, just like element-UI requires a separate style file.

Modify the app. vue file to use the pig-button component directly as follows:

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

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
Copy the code

The display is as follows:

At this point our component is packaged and can be downloaded directly from the NPM repository.

conclusion

Generally speaking, it is not difficult to package Vue components and publish them into the NPM repository. The main thing is to understand the install method of Vue and relevant knowledge of packaging. In fact, the most important thing is how to package a common component with a wide range of application and high scalability.

Source code address of this project:

GitHub