The vUE project of the company is implemented based on Element-UI, and many places use forms, forms, popovers and other components for many times. Therefore, the secondary packaging of these components based on Element-UI is published on NPM to ensure that any VUE project based on Element-UI can use this plug-in.

Here is the vue2.X project. The element- Plus corresponding to VUe3 is not very stable, so it is useless.

A, preparation,

1. Create a VUE2 project

The directory structure

2. Install element-UI and introduce it

npm i element-ui -S

3. Create a file

Custom elementPlugin folder under SRC file for encapsulation. Add a custom index.js file (the total entry file) and cz-table folder to the elementPlugin folder. Define an index.vue file in the CZ-table folder. As shown in figure:

Second, the development of

1. Write the component to encapsulate

The index.vue file encapsulates the Element-UI Table component, which is not encapsulated here.

<template> <div class="tt"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label=" date" width="180"> </el-table-column> <el-table-column prop="name" label=" name" Width ="180"> </el-table-column> <el-table-column prop="address" label=" address" > </el-table-column> </el-table> </div> </template> <script> export default { name: "Cz-Table", data() { return { tableData: [ { date: "2016-05-02", name: "Wang Xiaohu ", address:" 1518 Jinshajiang Road, Putuo District, Shanghai ",}, {date: "2016-05-04", name: "Wang Xiaohu ", address:" 1517 Jinshajiang Road, Putuo District, Shanghai ",}, {date: "2016-05-01", name: "Wang Xiaohu ", address:" 1519 Jinshajiang Road, Putuo District, Shanghai ",}, {date: "2016-05-03", name: "Wang Xiaohu ", address: "Lane 1516 jinshajiang Road, Putuo District, Shanghai ",},],}; }}; </script> <style scoped> .tt { width: 1000px; border: 1px solid #999; } </style>Copy the code

The ps: vue file must have a name, which is used by the following component to introduce registration

2. Import file index.js

Import the written index.vue file in the entry file, and then register

There are two methods: 1. Use the import operation

import CzTable from './Cz-Table/index.vue'; . . import xxx from './xxx/xxx.vue'; const components = [ CzTable, ..., */ const install = (Vue) => {if (install.installed) return // Check whether the installation is registered Component.foreach (component => Vue.component(component.name, component)) // Iterate and register components} if (typeof window! == 'undefined' && window.vue) {install(window.vue) // Install ()} export default {install}Copy the code

2. Get the vue file using require.context() in scaffolding

Const requireComponents = require.context('./', true, /\.vue$/) // Webpack method const install = (Vue) => {if (install.installed) return // iterate over the introduction of the component requirecomponents.keys ().foreach (fileName) => {const config = requireComponents(fileName) const componentName = config.default.name, Vue.component(componentName, config.default)})} if (Typeof window! == 'undefined' && window.Vue) { install(window.Vue) } export default { install }Copy the code

Three, publish,

1. Preparation

First of all, you should have an NPM account. If not, register first

Then modify the information in the package.json file

{" name ":" cz - element ", / / package name "version" : "0.0.8", / / version number "private" : false, / / whether private "main" : "SRC/elementPlugin/index. Js", / / the entry file "author" : "village head," / / author "description" : "based on element - the UI implementation of secondary packaging", / / profile "license" : [// keyword "vue2", "element-ui"], "scripts": {"serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "lib": "Vue - the cli - service build -- target lib - name cz - element - the dest lib/SRC/elementPlugin index. The js" / / component packaging command},... . }Copy the code

Name: specifies the name of the package to be published, which is easy to search on the NPM. The name cannot be an existing one on the NPM. Version: Indicates the version number. The version number must be changed before each release to NPM. Private: change to false or delete private. If true, publishing will fail. Main: entry documents address, can be a SRC/elementPlugin/index. The js files, can also be a js file after packaging. Scripts custom package command: package and publish to work properly (I did).

And then you can doREADME.mdTo write

The final packaging

npm run lib

The package will look like the package shown below

2. Run commands to publish information

npm login

Log in first and enter the NPM account, password, and email address in sequence

npm publish

After success, the package name +@+ version number is displayed at the end

It can be found on the NPM website upon successful release

Ps: If the first release is incorrect, there may be the following reasons:

1. The mailbox registered with NPM is not verified; 2. The file name in package.json already exists on NPM, which can be searched and verified on the official website before packaging and publishing; 3. No NPM login is performed; 4. Network problems.

Publish process: Change the version number — > package — > NPM login — > NPM publish

The project is not closed NPM login to login once

Four, the use of

Find an Element-UI project and install the published plug-in

npm i cz-element

You can see the installed plug-in in node_modules

Then import it in main.js

import CZ from 'cz-element'
import 'cz-element/lib/cz-element.css'

Vue.use(CZ)
Copy the code

Used in vue files

< cz-table ></ CZ-table > // The label name is the same as the name in index.vue aboveCopy the code

rendering

---

---