Detailed steps for publishing vue components to npm

This time I will bring you a detailed explanation of the steps for publishing vue components to npm. What are the precautions for publishing vue components to npm? The following is a practical case, let's take a look.

Why do you have this idea? It is mainly because the custom components in the vue project are used in multiple projects. When modifying a bug, you always have to modify it in the project branch and then synchronize it to the main line. This will easily lead to the branches not being synchronized to the main line after modification. This will slowly lead to inconsistent component versions, making upgrading components very cumbersome. In the end, we may have to maintain different versions of multiple components, which is not what we want.

So I plan to package and publish the components to npm. In each project, you only need to modify the component version in package.json to synchronize the latest version.

Component release process

1. I didn’t know much about packaging at first. I just simply extracted the original .vue file and related css and image resources, and then Put it under a project. Here are the detailed steps for publishing components to npm:

(1) Create a new component project and initialize a package.json file through npm init

(2) Extract the components Put it in the project path.
(3) In the directory where package.json is located, execute npm adduser. Here you need to register an npm account
(4) and then you are asked to enter your username, password, and email address filled in when registering. As shown in the picture:

(5) Then enter npm publish.

If nothing goes wrong, the component has been successfully released and can be installed through npm install xxxx.

2. Some minor problems were discovered during use. Since some of the syntax of es6 was used in index.js at that time (such as: map and const of

array), an error would be reported in lower versions of IE, although it can be solved by modifying js. But as an aspiring coder, I can't bear this kind of thing, because components like element-ui can be released after packaging the .vue file. Then I thought about getting it done.

3. Then we started to study how to load the packaged js by importing xx from xxx. After searching for information, I found that there is a main

attribute in package.json to set the path for loading js. As shown in the picture:

#4. The loading problem is solved, and the remaining problem is packaging. Since packaging requires some webpack configuration, I directly initialized a project with vue-cli and adjusted the webpack in it. The main thing is to remove the packaging

configuration file webpack.prod.conf.js in the build, and remove the HtmlWebpackPlugin, etc. here.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use vue to implement the 2048 mini game

How to use VeeValidate to perform form validation in the vue project Check function

The above is the detailed content of Detailed steps for publishing vue components to npm. For more information, please follow other related articles on the PHP Chinese website!