Develope Component

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

—— David Leinweber

開發元件是如此的有趣、有意義，以至於開發者會無時無刻在腦海裡邊寫程式，只為了好用。

一台螢幕發出藍、紅、黃、粉、紫色的筆記型電腦

開新檔案

1. 在 src/components 建立 .vue 檔。

2. naming style：Camel Case，以 ‘Bpa’開頭，例如： BpaButton.vue

註冊

// src/components/index.ts

import BpaButton from "./BpaButton.vue";

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

然後在 .vue 檔使用。

Type

在 /type 資料夾內新增 newFileName}.d.ts 檔案， 然後在 /types/bpa.d.ts 裡註冊

// types/bpa.d.ts

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

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

如果想快速在 Nuxt2 開發時測試…

1. npm run build

2. 複製 /dist 資料夾內容到 Nuxt

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

4. npm run dev