This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

Button component, Dialog component, input component, switch component, radio component, radioGroup component, form component and formItem component

Build Vue2 UI Component Library from 0 (1)

Build Vue2 UI Component Library from 0 (2)

Build Vue2 UI Component Library from 0 (3)

Build Vue2 UI Component Library from 0 (4)

Build Vue2 UI Component Library from 0 (5)

Build Vue2 UI Component Library from 0 (6)

Build Vue2 UI Component Library from 0 (7)

This article will write how to package the vue plug-in ~~~

1. Sort out the contents of the package and modify the entry files

Create a new Packages folder for all components and a Fonts folder. Add vue.config.js file, modify entry file, extend webpack configuration, add package to compile:

const path = require("path");
module.exports = {
  pages: {
    index: {
      entry: "src/main.js".template: "public/index.html".filename: "index.html"}},chainWebpack: config= > {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "package"))
      .end()
      .use("label")
      .loader("babel-loader")
      .tap(options= > {
        returnoptions; }); }};Copy the code

2. Expose the install method

  • The vue.js plugin should expose oneinstallMethods. The first argument to this method isVueThe constructor.
  • If you are usingVue.useWhen a plug-in is registered, the Install method is called to register all components.
  • In order to enable Windows users to register plug-ins without manually using vue.use (), call the install method for the user first.

Expose the install method by creating index.js in the Packages folder:

import Button from "./Button.vue";
import Dialog from "./Dialog.vue";
import Input from "./Input.vue";
import Switch from "./Switch.vue";
import Form from "./Form.vue";
import FormItem from "./FormItem.vue";
import "./fonts/iconfont.css";
// Error component list
const components = [Button, Dialog, Input, Switch, Form, FormItem];

const install = function(Vue) {
  // Register all components globally
  components.forEach(item= > {
    Vue.component(item.name, item);
  });
};
if (typeof window! = ="undefined" && window.Vue) {
    install(window.Vue);
}

export default install;
Copy the code

Test components

1. Use component libraries in examples/main.js:

import ZhUI from ".. /packages";
Vue.use(ZhUI);
Copy the code

Create a test folder under the examples folder to store the test components. You can use the test components in app. vue.

Four, pack into a library

Add command to package.json file in root:

"scripts": {
    "lib": "vue-cli-service build --target lib packages/index.js"
}
Copy the code

Execute command line:

npm run lib
Copy the code

Publish to NPM

1. Modify the package.json file

  • Json fileprivateField is changed tofalseNPM packages are not allowed to be private.
  • Add the main field. After the user installs the file, no one will use the field.
  • Add the author field, signature
"private": false."main": "dist/zh-ui.umd.min.js"."author": {
    "name": "Chicken Blood Garden"}},Copy the code

2. Add the. Npmignore file

Npmignore adds. Npmignore files that do not need to be uploaded to NPM

# omit directory SRC/packages/ public/ # omit file vue.config.js babel.config.js *.mapCopy the code

3. Switch taobao source to NPM source

  1. Method 1: directly change
npm config set registry=http://registry.npmjs.org
Copy the code
  1. Method 2: Install NRM
cnpm i nrm -g
nrm ls
Copy the code

The following information is displayed:

Run the following command to switch to the NPM source:

nrm use npm
Copy the code

4. Login NPM

If you don’t have an NPM account, go to the official website to register and then log in. Login NPM:

npm login
Copy the code

Fill in your user name, password and email address.

Release:

npm publish
Copy the code

Note:

  • If the name of the component library is the same as or close to the name of someone else’s package, an error will be reported, which can be changed in package.jsonnameField.
  • Remember to repackage your code after you change it laternpm run lib, modify the package.json fileversionField.