Get started with NPM uploading custom vue components

Write your own Vue component, upload it to NPM, and install it via NPM installation xxx-s to

The "dependencies" position inside the Package.json

Then, in the Main.js reference, you can use our custom components directly.

Import lccomponents from ' lc-components ' Vue.use (lccomponents)

First: Build a project with VUE-CLI scaffolding (such benefits can be locally debugged components)
Vue Init webpack lc-components

such as: Red box is the component source code, the green box is automatically generated scaffolding.

Within the components (that is, the red box), the command line executes NPM init, creating the Package.json,
Custom Webpack.config.js to eventually package the components into JS.

Such as: Is the Package.json setting

In order to save space, webpack.config.js on GitHub to find, last upload address

Custom components, all written components are put on the index.js
The. BABELRC inside the configuration, is ES6 conversion ES5, or will error

local Debugging No problem, just the NPM run build package (because we are referencing the packaged code), Webpack.config.js has been configured (the current configuration is CSS,JS not separate)
Package to the Dist folder.

Upload to NPM
Register First https://www.npmjs.com
In the Components folder (under the Package.json directory in the Red box), open the command line,
Perform:
1. NPM AddUser
2, then asked to enter the user name, password, registration of the mailbox filled.
3. Then enter NPM publish (post successful email notification, change the version number of Package.json each time)

And finally we're referencing our components.

(The name lc-components is the "name" value from the Package.json)

2, in the Main.js inside the introduction
Import lccomponents from ' lc-components '
Vue.use (lccomponents)

3, in the place to use, direct use of components

<lc-round:bgcolor= "BgColor": top= "Topdistance" ></lc-round>

Portal: Can not understand the following link reference

https://www.uis.cc/2017/10/13/How-to-publish-your-Vue-component-on-NPM/
73649022


Https://github.com/Summer-Lin/vue-components (my component template, template improvements in a lot of places, such as JS and CSS separation, I use less)

Lazy words, you can download the code, and then write their own components inside the component, and finally introduced into the index.js good
Don't forget that the NPM run build is packaged and then uploaded.

Get started with NPM uploading custom vue components