1 of 5

Vue2

i18n

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

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

Vue2

Nuxt2

設定

Bpai18n

文字

v-bind

Methods

使用

新增語言

新增語言檔至 /lang 資料夾
在 /lang/index.ts 寫 export

限制

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

Options

CSS & SCSS

Life’s too short to build something nobody wants.
—— Ash Maurya, Running Lean: Iterate from Plan A to a Plan That Works

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

資料夾位置

src/assets/scss

結構

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

覆寫 SCSS

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

https://github.com/ya-sai/piman-nuxt2-template/blob/main/assets/scss/base/_variables.scss

Update

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

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

package.json

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

Build

釋出版本

貼上版號標籤： x.x.x-{y}.x
撰寫 release note

更新 Codesandbox

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

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

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

開新檔案

在 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 {}

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

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

CSS & SCSS

Life’s too short to build something nobody wants.
—— Ash Maurya, Running Lean: Iterate from Plan A to a Plan That Works

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

資料夾位置

src/assets/scss

結構

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

覆寫 SCSS

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

https://github.com/ya-sai/piman-nuxt2-template/blob/main/assets/scss/base/_variables.scss

i18n

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

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

Vue2

//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' })

Nuxt2

// 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":"ページ"
  },
})

Bpai18n

import BpaI18n from '../locale'

export default Vue.extend({
  mixins: [ BpaI18n ],
  //...
})

文字

<!-- text -->
<span>{{ t('pagination.per') }}</span>

v-bind

<!-- v-bind -->
<nav
  :aria-label="t('pagination.aria')"
  class="bpa-pagination"
/>

Methods

//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')

新增語言

新增語言檔至 /lang 資料夾
在 /lang/index.ts 寫 export

限制

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

Options

// 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": "開啟"
  }
}

// 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": "開啟"
  }
}