How to use @vue/cli 3.0 to create, publish, and use your own Vue.js component library on NPM

Translator by: You may have NPM's package thousands of times, but have you ever created, published and used your own NPM package?

• Original: How to create, publish and use your own Vuejs Component library on NPM using @vue/CLI 3.0
• Translator: Fundebug

In order to ensure readability, this paper uses free translation rather than literal translation. In addition, the copyright of this article belongs to the original author, translation is only used for learning.

Although I've been working on vue.js for a while, I never need to publish components on NPM. But I've recently found that rewriting components in different projects is a very painful thing, so when I use the Vue.js development project for the third time, I think it's time for us to need some highly configurable and reusable components.

First, you need to install VUE-CLI to start.

NPM install-g @vue/CLI # or Yarn Global Add @vue/CLI Vue Create My-vue-library

We are using the VUE-CLI 3.0 beta version. You may README.md see a warning on GitHub: "Unless you are adventurous, do not use in production", obviously I am very adventurous, haha.

Your current control surface should look like this:

Now you just have to start doing the following:

NPM Run serve

Now start by creating a simple component that looks at an Banner example of a component.

<Template> <Divclass="Banner": style="Bannerstyles": class="' Banner__${position} '" > <Slot></Slot> </Div> </Template> <Script> Const Defaultstyles = { left:0, right:0, }; ExportDefault { Props: { Position: { TypeString, Default' Top ', Validator (position) { return [' Top ',' Bottom '].indexof (position) >-1; }, }, Styles: { TypeObject, Default() = ({}), }, }, Data () { return { Bannerstyles: { ... defaultstyles, ... this.styles, }, }; }, }; </Script> <Stylelang="Scss"Scoped> . Banner { padding:12px; color: #f6a623; Text-align:left; position:fixed; Z-index:2; } .banner__top { Span class= "line" > top:0; } .banner__bottom { bottom:0; } < /STYLE>

After registering a component as a Banner的 component, you can simply use the component in the template:

<Banner>fundebug: The most professional application error monitoring platform! </banner>

You can view the demo of this component in Codesandbox

Fundebug error real-time monitoring for your Vue project escort!

Now, if you want to use this component with NPM, you have to do something.

1th Step-Set up library build

You need to vue-cli build your component into a library. will be vue-cli-service build --target lib --name myLib [entry] added to your Package.json script.

By default, [entry] is your App.vue, but you can change it to the relative path of any file that you import these components. You may or may not choose to register these components globally, but if I were you, I would register them with my library name as a prefix. When programmers use components, the less code the better.

I have added for my script so that build-bundle I can run npm run build-bundle to create my library package.

This produces output similar to the following:

For the Codesandbox example, the input file should resemble the following:

2nd Step-point to output file in Package.json

To ensure that package.json the main properties in are correctly pointing to the output file. I prefer to use a commonjs package.

3rd Step-Add/Login as user on NPM

Make sure you register on NPM. npm adduserregister a new user and npm login log in as an existing user.

4th Step-Verifying NPM user credentials

Enter npm whoami to verify your user name.

5th Step-Name your component library

To choose a name for your package, you must make sure it is not already in use. Make sure to put it in your package.json.

6th Step-Build

Build the bundled software by executing the package script that you added in step 1th.

NPM Run Build-bundle

7th Step-Publish the component library on NPM

Run npm publish – access public to publish the library for public access.

That's it. You have finished publishing your Vue component library on NPM!

8th Step-How to use your newly published library

Install the component library from NPM and import the components into your code. Installation:

NPM install--save [your library name]

Where [your library name] is the name of the library you gave in step 5th.

At your main.js or similar entry point, simply import your library using the following command:

' Your library name ';

Now you can start using your components, because we've registered them globally in the first step.

For our sample component, Banner when we register the component, the component name is Flockbanner. So, you can use it directly in your template:

<flock-banner> This is your banner is an example </flock-banner>

Use the component library mentioned above to view the instance: HTTPS://CODESANDBOX.IO/S/N9N7YY2LWP

We're done with the whole process. After the Vue.js team presented CLI version 3, it was easy to build your own component libraries for reuse. If you feel this process a little help, point a praise Bai, but also support the next Fundebug Oh!

How to use @vue/cli 3.0 to create, publish, and use your own Vue.js component library on NPM