Source address, if it is helpful to you hope not to be stingy with your Star

This article describes how to develop components based on Vue and publish them on NPM. Let’s cut to the chase

Vue develops plug-ins

Look at the development specifications on the website before you start

The expected result of our development is support for import, require, or direct introduction using the script tag, like this:

// Note that the package name prefix is Custom and the component name prefix is MOOR
// This is because the name was used when the package was released (it was called moor-ui when I experimented). Now it is changed to custom-ui, but the component prefix is too lazy to change
import CustomUI from 'custom-ui';

// 或者 const CustomUI = require('custom-ui');

// or 

Vue.use(CustomUI);
Copy the code

Build a Vue project

We used Webpack-simple to develop components:

vue init webpack-simple <project-name>
Copy the code

PS: I chose use sass here because it will be used later in the development component

The file structure for developing components is as follows, referring to Element, but this is a simple version for sharing and using

. ├ ─ ─ the SRC / / / source directory │ ├ ─ ─ packages / / / component │ │ ├ ─ ─ the switch / / / components (switch, for example) │ │ ├ ─ ─ moor - switch. Vue / / component code │ │ ├ ─ ─ │ ├── index.js // Html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.html.htmlCopy the code

Ok, now that everything is ready to go, we can start developing a component. Following the example above, let’s start developing a switch component.

Develop individual components

Let’s look at the target effect:

Start development: Create a switch folder under Packages to store the switch component source code. Continue to create moor-switch.vue and index.js files in switch folder

moor-switch.vue

This file is the component source code, I do not put the source code here, here to say what I personally think the most important point, this is also the most important point to encapsulate the form class components:

Custom component binding v-Model, official website address

Use:

<! -- Use parent value binding -->
<! -- isSwitch = false -->
<moor-switch 
  v-model="isSwitch">Switch:</moor-switch>

<! -- Subcomponents must have input to handle the corresponding value -->
<! Value ="value" to bind a value -->
<! - @ change = "$emit (' input '$event. Target. Value)" event trigger change value -- -- >
<input
    type="checkbox"
    @change="$emit('input', $event.target.value)"
    :true-value="activeValue"
    :false-value="inactiveValue"
    :disabled="disabled"
    :value="value">

<! -- props to accept the value -->
<script> 
/ /... Omit code here
props: {
  value: {
    type: [Boolean.String.Number].default: false}}/ /... Omit code here
</script>    
Copy the code

index.js

There is nothing to say in this file except that the component is Vue plug-in. The code is just three lines here and I’ll leave it there:

// MoorSwitch is the name of the corresponding component. Remember that the name attribute in the moor-switch.vue file is the name attribute
import MoorSwitch from './moor-switch';

MoorSwitch.install = Vue= > Vue.component(MoorSwitch.name, MoorSwitch);

export default MoorSwitch;
Copy the code

Ok, that’s pretty much done, but in order to get all the components together like I have select, INPUT, button, and so on, I want to put them all in one file so that I can manage them

So in app.vue, I created a new index.js file, and the content of the file is nothing to say.

import HelloWorld from './packages/hello-world/index.js';
import MoorSwitch from './packages/switch/index.js';
/ /... Keep adding if you have any

const components = [
  HelloWorld,
  MoorSwitch
  / /... Keep adding if you have any
]

const install = function(Vue, opts = {}) {
  components.map(component= >{ Vue.component(component.name, component); })}/* Supports the use of tags to introduce */
if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  HelloWorld,
  MoorSwitch
  / /... Keep adding if you have any
}
Copy the code

The local run uses the tag to modify the index.html file:

<! -- Omit part of the code -->
<div id="app">
  <moor-hello-world :color="color" :msg="msg"></moor-hello-world>
  <moor-switch
  v-model="lightSwitch">Switch:</moor-switch>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="/dist/custom-ui.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      color: 'red',
      msg: 'hello world! ',
      lightSwitch: false}}})</script>
Copy the code

Then run NPM run dev and you can see the effect:

Well, at this point our component development is complete; How do I package and publish to NPM

Published to the NPM

Before packaging, we first need to change the webpack.config.js file;

/ /... Omit code here
// Execution environment
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // Configure different entrances according to the execution environment
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js'.output: {
    // Modify the package export to package an index.js file in the outermost level directory, which we will point to by default
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'.filename: 'custom-ui.js'.library: 'custom-ui'.// Specify the name of the module where you use require
    libraryTarget: 'umd'.// libraryTarget will generate different UMD code, which can be just commonJS standard, amd standard, or just introduced by script tag
    umdNamedDefine: true // AMD modules are named during UMD construction. Otherwise, use an anonymous define
  },
  / /... Omit code here
}
Copy the code

Modify the package.json file:

Change this field to false for open source release
"private": false.// This is the path it will retrieve when importing custom- UI
"main": "dist/custom-ui.js".Copy the code

Issuing an order is a two-sentence sentence

// You are required to have an NPM account. There is a link to the official website at the beginning of this article
npm login   / / login
npm publish / / release
Copy the code

After that we can install it in the project

npm install custom-ui -S 
Copy the code

Introduce the plug-in in main.js

import CustomUI from 'custom-ui'
Vue.use(CustomUI)
Copy the code

Used in components:

<! -- use the scaffold's HelloWorld component directly -->
<! -- Insert the code in the right place -->
<div class="moor-item">
  <label>Input: </label>
  <moor-input
  v-model="input1"
  placeholder="Please enter information">
  </moor-input>

  <moor-input
    v-model="input2"
    placeholder="Please enter information">
  </moor-input>

  <moor-input
    placeholder="Input box disabled"
    :disabled="inputDisabled">
  </moor-input>
</div>

<div class="moor-item">
  <label>Switch: </label>

  <moor-switch
  v-model="lightSwitch">Switch (on):</moor-switch>

  <moor-switch
  v-model="switchLight">Switch (off):</moor-switch>
</div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // HelloWorld
      msg: 'Welcome to moor UI! '.color: 'red'.// input
      input1: ' '.input2: 'This is the default.'.inputDisabled: true.// switch
      lightSwitch: false.switchLight: true}},watch: {
    lightSwitch: newValue= > console.log('Switch:', newValue),
  }
}
</script>

<style scoped>
.moor-select..moor-btn..moor-switch..moor-input {
  margin: 10px 6px;
}
.moor-item {
  display: flex;
  align-items: center;
}
.moor-item label {
  width: 100px;
  display: inline-block;
}
</style>
Copy the code

The preview looks like this:

PS: Modify.gitignore to remove ignoring dist because the files we package also need to be committed; You need to change the version number every time you go to NPM, the version field in package.json

Write relatively simple, mainly or to provide ideas. Used to open source components you have to understand it, sometimes in the process of development we can not find the appropriate open source components need to develop their own, this time we write their own some delicate small plug-in open source is good…

Finally hope you give a Star source address

Oh, README, I don’t want to write… Ha ha