Develop Component

Give someone a program, you frustrate them for a day; teach them how to program, you frustrate them for a lifetime.

—— David Leinweber

Developing components is so fun and meaningful that developers will constantly be writing code in their minds just to make them easy to use.

A laptop whose screen emits blue, red, yellow, pink, and purple

Create new file

1. Create a .vue file in src/components.

2. naming style: Camel Case, starting with 'Bpa', for example: BpaButton.vue

Register

// src/components/index.ts

import BpaButton from "./BpaButton.vue";

const Components: {[key: string]: any} = {
  BpaButton,
  //...
}

Then use it in a .vue file.

Type

Add a {newFileName}.d.ts file in the /types folder, then register it in /types/bpa.d.ts

// types/bpa.d.ts

// import
import { BpaNewComponent } from './new-component'

// export
/** NewComponent Component */
export class NewComponent extends BpaNewComponent {}

If you want to quickly test while developing in Nuxt2…

1. npm run build

2. Copy /dist folder contents to Nuxt

3. import piman from "your-path/piman.umd.js"

4. npm run dev