:::

開發元件

成為 Piman 貢獻者後，學習如何開發元件的方法。

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

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

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

開新檔案

在 src/components 建立 .vue 檔。
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 {}

如果想快速在 Nuxt 測試…

npm run build
複製 /dist 資料夾內容到 Nuxt
import piman from “your-path/piman.umd.js
npm run dev

# 開發 # 開發元件