Encapsulate vue public components, and release the npm platform, so that everyone can download and use

foreword

After the component package is released to the npm platform, others can use your plug-in installed by command. A good public component should have the characteristics of flexibility and versatility.

After the release is successful, you can find the name of your component by searching on the cpm official website , as shown in the figure below

Component download address: cxy-loading-animation - npm

first step

Create a simple vue project, use vue create xxx to create a vue project

second step

Create a package folder under the src folder, and encapsulate your components, then create index.js under the package folder, and import the packaged components in the index.js file, as follows

third step

Add the following code to the package.json file

the code

"package": "vue-cli-service build --target lib ./src/package/index.js/ --name cxy-loading-animation --dest cxy-loading-animation"

Instruction name: command -- target lib --name packaged file name packaged path --dest packaged folder name

the fourth step

Execute the npm run package command to package. After successful execution, a file will be generated in the directory, as follows

Enter the folder just generated, enter the command cd cxy-loading-animation, execute the initialization command npm init -y, a package.json will be generated, and some configurations can be written in the package.json.

Optimization, keep only the files we need, and create a new readme.md to write the usage instructions of the components.

Create a new style folder to store css files. If you think the name of cxy-loading-animation.umd.min.js is too long, you can change it to index.js. At the same time, change the main: entry file in package.json to index.js. After optimization, as shown in the figure below.

the fifth step

Use the npm adduser command to add an npm account, if you do not register an account with npm yourself

step six

Use npm publish to upload plugins to the npm platform

After the upload is successful, you can see it on the platform, as follows

The components packaged here have been uploaded to the npm platform.

Note: If the upload fails, the name may be duplicated, just change the name, or it may be a mirror problem. If you have changed the Taobao mirror before, please switch to the official mirror. The switching command is as follows:

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

Use our own plugins in the project

Execute the installation command

npm install cxy-loading-animation

Then main.js references the global registration

import cxyLoadingAnimation from 'cxy-loading-animation'
import 'cxy-loading-animation/cxy-loading-animation.css'

Vue.use(cxyLoadingAnimation)

Then use the page you need to use

<cxyLoadingAnimation :animation="true" />

Component effect

new version update

If you update the component, you need to modify the version number, the version number must be larger than the last one, otherwise it cannot be uploaded