arrow-left

All pages
gitbookPowered by GitBook
1 of 6

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Update

I’m not a great programmer; I’m just a good programmer with great habits.

—— Kent Beck

更新版本是一種持續性的過程,所以必須有良好的識別度。

一台打字機,上面放著一張寫著update字樣的圖片

hashtag
package.json

在 package.json 裡更改 version 內容,其格式為 x.x.x-{y}.x

hashtag
Build

hashtag
釋出版本

  1. 貼上版號標籤: x.x.x-{y}.x

  2. 撰寫 release note

hashtag
更新 Codesandbox

如果您有權限更改,請更新範例演示內容。

npm run build
npm login (or npm adduser and then login)
npm publish

Vue2

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

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

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

hashtag
開新檔案

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

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

hashtag
註冊

然後在 .vue 檔使用。

hashtag
Type

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

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

  1. npm run build

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

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

npm run dev
// src/components/index.ts

import BpaButton from "./BpaButton.vue";

const Components: {[key: string]: any} = {
  BpaButton,
  //...
}
// types/bpa.d.ts

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

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

CSS & SCSS

Life’s too short to build something nobody wants.

—— Ash Maurya, Running Lean: Iterate from Plan A to a Plan That Worksarrow-up-right

無障礙網頁設計在排版與色彩上需要注意的地方很多,擁有良好管理方式是促進無障礙變得更好。

很多個不同顏色的拱門,一眼望去像是一系列的漸層色彩變化。

hashtag
資料夾位置

src/assets/scss

hashtag
結構

hashtag
覆寫 SCSS

在 _variables.scss 複寫 Piman 的 scss variable 即可。例如您如果使用我們的 Nuxt 範本,只需要在這個檔案覆寫變數。

https://github.com/ya-sai/piman-nuxt2-template/blob/main/assets/scss/base/_variables.scssarrow-up-right
scss/
├── base/
├───├── _core.scss
├───├── _keyframes.scss
├───├── _mixins.scss
├───├── _reset.scss
├───├── _utilities.scss
├───├── _variables.scss
├── components/
├───├── _core.scss
├── layout/
├───├── pages/
├───├── _layout.scss
├───├── _core.scss
├── plugins/
├── style.scss

成為貢獻者,一起開發 Piman

感謝您對 Piman 有興趣!

Piman 的目標是盡量讓通用設計的理念「Design for all」落實在網頁設計上。

在成為開發夥伴之前,請您先花一點點時間閱讀以下項目:

  • Issue

    • 請先搜尋 Github 上有沒有相關 issue

    • 有的話,可以嘗試解解看

    • 沒有的話可以開一個新 issue

    • 並且使用我們設定的 label

  • Pull Request

    • fork repo

    • clone fork

    • commit 訊息

  • Tag

    • release format:x.x.x-{y}.x

  • feat:新功能

  • fix:修正 bug

  • refactor:coding style, project arch, 文件

  • revert:revert commit

  • unittest

  • DO NOT PR dist 資料夾

  • rebase

  • PR 到 dev 分支

  • i18n

    Your time is limited, so don’t waste it living someone else’s life.

    —— Steve Jobs

    多語言設定就好像是這句名言,如果沒有翻譯成多種語言,那麼就僅僅是在一個文化圈流傳,這樣有點太可惜了。

    hashtag
    Vue2

    hashtag
    Nuxt2

    hashtag
    設定

    hashtag
    Bpai18n

    hashtag
    文字

    hashtag
    v-bind

    hashtag
    Methods

    hashtag
    使用

    hashtag
    新增語言

    1. 新增語言檔至 /lang 資料夾

    2. 在 /lang/index.ts 寫 export

    hashtag
    限制

    若有使用其他第三方套件,則需手動為其改變語言。

    hashtag
    Options

    一個寫著不同語言的我愛你的版子。
    //main.js
    import Vue from 'vue'
    
    import piman from "@yasai/piman";
    import '@yasai/piman/dist/piman.css';
    Vue.use(piman) //Default is “zh-Hant-TW”
    //Vue.use(piman,{ locale: 'en' })
    // nuxt.config.js
    export default {
      plugins: [
        '@/plugins/piman.js',
      ],
    }
    
    // plugins/bp-a11y.js
    import Vue from 'vue'
    import piman from "@yasai/piman";
    Vue.use(piman) //Default is “zh-Hant-TW”
    //Vue.use(piman,{ locale: 'en' })
    
    import piman from "@yasai/piman"
    
    piman.i18n.use({
      "pagination":{
        "page":"ページ"
      },
    })
    import BpaI18n from '../locale'
    
    export default Vue.extend({
      mixins: [ BpaI18n ],
      //...
    })
    <!-- text -->
    <span>{{ t('pagination.per') }}</span>
    <!-- v-bind -->
    <nav
      :aria-label="t('pagination.aria')"
      class="bpa-pagination"
    />
    //template
    {{ add() }}
    
    //script
    methods: {
      add(){
        let text = this.t('pagination.aria')
        text = text + 'Add'
        return text
      },
    }
    import piman from "@yasai/piman"
    
    piman.i18n.use('en')
    // All options
    {
      "pagination":{
        "total":"共",
        "page":"頁",
        "per":"每頁",
        "result":"項",
        "goto":"前往",
        "exceed":"噢!此頁碼不適用。",
        "aria":"分頁選擇",
        "input_goto":"請輸入想前往的頁面",
        "first_page_text":"第一頁",
        "prev_page_text":"上一頁",
        "next_page_text":"下一頁",
        "last_page_text":"最後一頁",
      },
      "form":{
        "required": "必填"
      },
      "breadcrumb":{
        "current_page":"現在頁面位置"
      },
      "button":{
        "loading": "載入中"
      },
      "dialog":{
        "close":"關閉燈箱"
      },
      "dropdown":{
        "goto":"前往",
        "new_tab":"另開視窗前往"
      },
      "input":{
        "show":"點擊顯示密碼",
        "hide":"點擊隱藏密碼",
        "clear":"清空輸入",
        "placeholder":"請輸入"
      },
      "msg":{
        "area":"訊息區域",
        "close":"關閉訊息框",
      },
      "select":{
        "placeholder": "請選擇",
        "clear":"清空下拉式選單",
        "search":"搜尋",
        "area_search":"請輸入關鍵字搜尋與過濾下拉式選單選項"
      },
      "collapse":{
        "title": "標題",
      },
      "switch":{
        "off": "關閉",
        "on": "開啟"
      }
    }