1. Create projects and components

Set up a base project with vue-CLI and create a new component, such as a Banner component:

src/components/alee-banner/AleeBanner.vue:

<template> <div class="banner" :style="bannerStyles" :class="`banner__${position}`"> <slot></slot> </div> </template> <script> const defaultStyles = { left: 0, right: 0 }; export default { name: 'AleeBanner', props: { position: { type: String, default: 'top', validator (position) { return ['top', 'bottom'].indexOf(position) > -1; } }, styles: { type: Object, default: () => ({}) } }, data () { return { bannerStyles: { ... defaultStyles, ... this.styles } }; }}; </script> <style lang="less" scoped> .banner { padding: 12px; background-color: #fcf6cd; color: #f6a623; text-align: left; position: fixed; z-index: 2; } .banner__top { top: 0; } .banner__bottom { bottom: 0; } </style>Copy the code

Then reference the test in the other component:

<alee-banner position="bottom">This is a banner! </alee-banner>Copy the code

The component is working properly.

2. Component entry file

Create an index.js file at the same level as the component to register the component globally:

 import Vue from 'vue';
 import AleeBanner from './AleeBanner.vue';
 ​
 Vue.component(AleeBanner.name, AleeBanner);
 export default AleeBanner;
Copy the code

3. Do you need install?

In fact, the above steps have already registered the component, once imported, can be used directly. However, plug-ins developed according to the official specification should expose an install method, which is used to pass in extension methods and so on.

The vue. use method is then called to import the component:

Install (Vue) 'Vue. Use (MyPlugin) new Vue({//... Component options})Copy the code

So our index.js needs to be modified:

 import AleeBanner from './AleeBanner.vue';
 ​
 AleeBanner.install = Vue => Vue.component(AleeBanner.name, AleeBanner);
 ​
 export default AleeBanner;
Copy the code

4. Packaging

Modify the package.json file to add a lib command to package components:

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "lib": "vue-cli-service build --target lib --name AleeBanner --dest lib ./src/components/alee-banner/index.js"
   },
Copy the code

Perform NPM lib:

Common.js is for packers, umd.js is for browsers, demo.html reference aleebanner.umd. js can be opened directly to see if it can print component information normally.

5. Release

The first need to register in the NPM official website is not much to say, before the release of useful Taobao mirror from Taobao mirror to the official address.

Several key package.json configurations need to be changed:

"Main" : "lib/AleeBanner.com mon. Js", "name" : "alee - banner", "version" : "while", "files" : [ "lib/*", "src/*", "public/*", "*.json", "*.js" ]Copy the code

Then publish NPM and publish successfully:

Just install the reference test in another project.

6. Summary

This is a simple release of a single component, packaged quickly using the official scaffolding. If it is a release of a component library, we will need to do some more work and write more about it next time.