Create and publish

The new component

File path: SRC/components/Hello/hello.html vue

<template>
  <div>
    <h1>hello</h1>
  </div>
</template>

<script>
  export default {
    // The name must be given, or the error will be reported
    name: 'Hello'
  }
</script>
Copy the code

Exporting component plug-ins

File path: SRC/components/Hello/index, js

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

Export packaged components to a module

File path: SRC /index.js

import Hello from "./components/Hello";
import xxx from "./components/xxx";

export {
  Hello,
  xxx
}
Copy the code

Define a TS module that will be referenced without warning

File path: SRC /index.d.ts

Package. json -> name
declare module 'syy-ui';
Copy the code

Modify the package. The json

/* * private: set to false * main: indicates entry file * types: sets ts module entry file * files: mandatory file for uploading to the NPM server */
{
  "name": "syy-ui"."version": "0.1.0 from"."description": Component library."private": false."main": "./src/index.js"."types": "./src/index.d.ts"."files": [
    "src/components/*"."src/index.js"."src/index.d.ts"],}Copy the code

Release NPM package

• Visit www.npmjs.com to sign up for an account
• Return to the terminal window of the VUE project

  // You need to switch to the original NPM image. Taobao image cannot be used
  npm login / / login
  npm who am i // Confirm login
  Json -> version (package.json -> version)
  npm publish / / release
  Copy the code

Use the component library

The installation

npm i syy-ui -S
Copy the code

Import files on demand in the entry

import { Hello, xxx } from "syy-ui"
Vue.use(Hello)
Vue.use(xxx)
Copy the code

Use in pages

<template>
  <div>
    <Hello />
  </div>
</template>
Copy the code

source

• Hot heartbeat: VUE custom component library releases NPM