Initialize the project

Here we initialize a VUE project using the official VUe-CLI

npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create admin-ui
Copy the code

Admin-ui directory structure:

Create the Packages folder in the SRC sibling directory to hold the components that need to be packaged:

Let’s write a simple Vue Component that wraps the input component based on elementUI:

<template> <div v-show="showInput"> <el-input v-model="currentValue" v-bind="$props" @keydown.enter.native="handleInputEnter" :placeholder="placeholder" :dataType="dataType" ref="input" :inputPattern='inputPattern'> </template> </el-input> <div :style="{ visibility: !! editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div> </div> </template> <script> import { Input, Button, Select, Option } from 'element-ui' import pattern from '.. /.. /pattern.js' const EMAIL_ERROR = 'Mailbox validation failed '; export default { name: "FkInput", data() { return { editorErrorMessage: null, showInput: true, inputType: '', emailPattern: pattern.email }; }, props: { ... Props, // Inheriting elementUI props... Button.props, ... Select.props, ... Option.props, value: { type: [Number, String], default: '' }, placeholder: { type: String, default: 'Please enter something'}, inputPattern: {type: [Object, String], default: NULL}}, computed: {currentValue: {get: function() { return this.value; }, set: function(newValue) { this.$emit("input", newValue); }}, methods: {evtChange(newValue, lr) {this.$emit('change', newValue, lr); }, handleInputEnter() {if (this.inputType! == 'textarea') { this.validate() } }, validate() { const type = this.dataType && this.dataType.toLowerCase(); var pattern = this.inputPattern ? this.inputPattern.pattern : '', message = this.inputPattern ? this.inputPattern.message : ''; If (type | | the pattern) {switch (type) {/ / in the actual project need to validate multiple input data types, this example only verify the mailbox case 'email' : the pattern = this. EmailPattern; message = EMAIL_ERROR; break; default: break; } if (pattern && ! pattern.test(this.currentValue || '')) { this.editorErrorMessage = message; return false; } } this.editorErrorMessage = ''; } }, mounted() { this.$nextTick(_ => { this.inputType = this.$refs.input.type; }) console.log('mounted'); }, updata() { }, watch: { currentValue: { immediate: true, handler(val) { this.$nextTick(_ => { if (this.inputType ! == 'textarea' && val ! == '') { this.validate(); } else if (val == '') { this.editorErrorMessage = '' } }); } } } } </script> <style stylus="css"> </style>Copy the code

Configuration items

Let’s configure the current project so that it can be published to NPM. If components are imported on demand, we need each Component to register with the Vue, so we need to expose our Component in a single Component:

/packages/input/index.js
import FkInput from './src/input.vue'
FkInput.install = function (Vue) {
             Vue.component(FkInput.name, FkInput)
}
export default FkInput
Copy the code

We then edit the entry file Packages /index.js to automatically register our Component in the Vue when imported as a UI library:

import FkInput from './input/index.js' const components = [ FkInput ] const install = function(Vue) { components.forEach(component => { Vue.component(component.name, component); }); } if (typeof window ! == 'undefined' && window.Vue) { install(window.Vue); } export default { FkInput, install } export { FkInput, install }Copy the code

ElementUI can be introduced in two ways:

import { Button,Input } from 'element-ui'
Vue.use(Button)
Vue.use(Input)
Copy the code

Second, the global introduction mode:

import ElementUI from 'element-ui'
Vue.use(ElementUI)
Copy the code

This is exported twice so that components can be loaded on demand.

Export exposed components can be imported on demand while export default exposed components can only be imported globally.

Next we add the build project script to the package.json scripts:

Where –name admin-ui specifies the name of the library to publish, we execute the script for the new home above:npm run libHere we choose to publish our *.common.js file by default, so we add the main property to package.json.

When we specify this property, the files specified in main are loaded by default when we reference the component library.

Finally, we configure the files property in package.json to configure the file path we want to publish to NPM.

Here we put in all the files that the user might use to reference our component library:

The final configuration is:

Published to the NPM

First we can register an NPM account (skip this step if you already have an account) or we can register at www.npmjs.com/

NPM add user // Enter the user name, email address, etcCopy the code

Then use NPM login to login to the status of the registration number

After login, you can use NPM whoami to view the login status

Before publishing, we will change the name of the project (be careful not to conflict with existing project names) and recommend @username/projectName.

Next, we can publish our UI component library. Before publishing, we will compile again and make the build file with our latest changes:

npm run lib
Copy the code

We publish our project using the following command:

npm publish --access public
Copy the code

Note the version property specified in package.json: Every time we update our component library we need to update version, and the private property in the configuration needs to be set to false

Local Installation and use

This completes the release of our UI component library. We can then use NPM install admin-ui in any project that needs to use the component library

import UI '@ssthouse/admin-ui'
Vue.use(UI)
Copy the code

Now we can use this Component in our own project:

<template> <fk-input v-model="input" :inputPattern="inputPattern" clearable></fk-input> </template> <script> export default { name: '', data() { return { input: '', placeholder: '', inputPattern:{ pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(? :\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(? :[\w](? :[\w-]*[\w])? \.) +[\w](? :[\w-]*[\w])? /, message: 'This message is a validation failure'}}}}} </script>Copy the code

After these steps, we have a component library of our own. We can always update and release our own new versions of the component library.

Projects that rely on the library need only use a simple NPM command.