Vue CLI3 library mode sets the component library and publishes the process of NPM

There are currently a variety of UI component libraries, such as Element and IView, and their powerful unquestionable. But what we face is more complicated in demand. When they can’t meet our needs, it is necessary to develop a set of components belonging to their team.

So the purpose of this article is to let readers can make a simple plug-in for use by this article, a large-energy architecture and maintenance of a component library.

The following simple color selector plug-in vcolorpicker describes the process from developing to NPM from the NPM.

, technology stack

How to create a project through a new scaffolding, this is not mentioned, and you will see the official documentation.

VUE-CLI3: The new version of the library mode can make us easily create a library

    npm: Component library will be stored in npm
  • WebPack : Modifying the configuration requires a point of WebAPCK.
  • Second, Outline
Want to build a component library, we must have a probably idea.

Programming Directory Structure

Configure the project to support the directory structure

    Writing component
  1. Writing example
  2. Configure the library mode Package compilation
  3. 3, planning directory structure
  4. 1, create project
Create a default item in the specified directory, or choose yourself according to yourself.

$ Vue Create.

2, adjust the directory

We need a directory storage component, a directory stored example, and modify the directory in the following way.

.... | - EXAMPLES // Original SRC directory, modified to Examples Used as sample display | - package // Add packages to write storage components ....

4, configure the project to support new directory structures

After the last directory is transformed, two problems will be encountered.
 The SRC directory is renamed EXAMPLES, causing the project that cannot run  , the directory does not join WebPack compile 
Note: CLI3 provides one Optional vue.config.js profile. If this file exists, he will be loaded automatically, all the configurations of the project and WebPack are in this file.

Vue cli3 库模式搭建组件库并发布到 npm的流程

1, reconfigure the entry, modify the configuration

new version of the Vue CLI supports the use of the Pages option in Vue.config.js to build a multi-page application .

Use Pages to modify the entrance to Examples

  1. module.exports = {// Modify the src directory is an examples directory Pages: {index: {entry: ‘ Examples / main.js’, Template: ‘public / index.html’, filename: ‘index.html’}}}

2, support the processing of the packages directory, modify the CHAINWEBPACK option in the configuration

package is our new A directory that is not processed by WebPack by default, so you need to add configurations to this directory.

CHAINWEBPACK is a function that receives a CHAINABLECONFIG instance based on WebPack-chain. Allows finer granular modifications to the internal WebPack configuration.

Module.Exports = {// Modify SRC for Examples Pages: {index: {entry: ‘Examples / Main.js’, Template:’ public / index.html ‘, filename:’ index.html ‘}}, // Extension WebPack configuration, make Packages to compile CHAINWEBPACK: config => {config.Module.Rule (‘ JS ‘) .include .add (‘ packages’) .end (‘package’). ) .USE (‘Babel’) .loader (‘Babel-loader’) .tap (options => {// Modify its option … Return Options})}}

Five, write components

We have configured support for new directory architectures, Let’s try to write components. Here we take a small in the NPM.Plug-in as an example.

github – color selector: vcolorpicker

1. Creating a new component

 In the packages directory, all single components Store in the form of a folder, all here create a directory Color-Picker /   Create a SRC / Directory storage component source code 
in the Color-Picker / Directory

Created under the / color-picker directory The index.js file provides reference to components.

Modify the /Packages/color-picker/index.js file and provides references.

# /PACKAGES/COLOR-PICKER/index.js// Import component, the component must declare the NameImport ColorPicker from ‘./src/color-picker.vue’// Provide install installation methods for components for the need to introduce colorPicker = function (Vue) {vue.component (, colorPicker)} // Default Export Component Export Default ColorPicker

2. Integrated all components, exported to the outside, a complete component library modify the / recent library to export the entire component library.

  1. / / Import Color Selector Components Import ColorPicker from ‘./color-picker’// Storage ComponentsList const components = [colorpicker] // Defines the install method to receive the VUE as a parameter. If you use a USE registration plugin, all components will be registered constall = function (vue) {// Judgment whether IF (Install.Installed) Return // Traverse Registration Global Component (Component => Vue.component (, Component)} // Judgment is the object that is directly introduced into the file IF (TypeOf Window! == ‘undefined’ && window.vue) {install (window.vue)} Export default {// exported object must have INSTALL can be installed by the Vue.use () method, // The following is a specific component list colorPicker}
6. Preparation example

Vue cli3 库模式搭建组件库并发布到 npm的流程

1. Import component library

 Import Vue from 'Vue'Imp.Vue'/ / Import Component Library Import ColorPicker From './../packages/index'// Registration component library Vue.use (colorPicker) Vue.config.ProductionTIP = FALSENEW VUE ({Render: h => h (app)}). $ mount (' # app) ')   2, in the example, the components in the component library 
After using Vue.use () in the previous step, you can use it directly on any page without additional introduction. Of course, you can also introduce on demand.

Export Default {data () {return {color: ‘# ff0000’}}, methods: {HEADLECHANGECOLOR () {console.log (‘color change “}}}}
Seven, release to NPM, convenient to reference directly in the project

Let’s have a complete component library that we have developed, and next is published to NPM for later use. 1. Add a command to the library in Package.js

In the library mode, VUE is an external, which means that even in the code introduces Vue, packaged The file also does not contain Vue.

Vue CLI3 Build Objectives: Library
 Here we add a command npm run lib   
– TARGET: Build a target, default is an application mode . This is modified to lib enable library mode. – DEST: Output Directory, default DIST. Here we change to lib

[entry]: The last parameter is an entry file, which defaults to src / app.vue. Here we specify the compilation package of the packages / component library.

“Script”: {// … “lib”: “Vue-cli-service build –target lib –name vcolorpicker –Dest lib packages / index.js “}
 Execute Compile Library Command    $ NPM RUN LIB    2, the field   
Name Version

Main Private


{“Name “:” VcolorPicker “,” Version “:” 0.1.5 “,” Description “:” Vue-based color picker “,” main “:” lib / vcolorpicker.UMD.min.js “,” keyword “:” VcolorPicker ColorPicker Color-Picker, “Private”: false}

3, add a .npmignore file, setting ignore the release file
  • We published to NPM Only the compiled lib directory, package.json, is to be released. So we need to set ignore directory and files.
  • , like .gitignore, what file is required, See the actual situation.
# 略 目 目 Examples / PackAges / public / # ignore the specified file Vue.config.jsbabel.config.js * .map
 4, login to NPM   First need to be NPM Register an account, the registration process is slightly. 
If Taobao mirror is configured, set back to NPM mirror:

$ npm config set registry

Vue cli3 库模式搭建组件库并发布到 npm的流程

The login command is then executed on the terminal, enter the username, password, and mailbox to log in.

5, released to NPM

Perform a release command, release assembly to NPM

6, release success

After the release is successful, it is a few minutes, that is, NPM official website search. The following is the VColorPicker

, summarizes
  , the above is the Vue CLI3 library mode setup component for you. The library is published to npm, I hope to help everyone. If you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website! 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment