使用 Vue3！

自己的 UI Framework 自己做！

Mike @ Laravel X Vue Conf Taiwan 2023

# Workshop

# about me

Mike

雷麒科技資深前端工程師
出過幾堂線上課程
Youtube 搜尋 @MikeCheng
去年也有出現

規劃 UI Framework

Framework 的定位 ( 例如：高度客製化或是專門給後台專用 )
你的 Framework name
UI 提供的種類

初期的規劃

支援框架的版本
是否要向下相容
是否要支援其他框架
是否要依賴其他套件

開發的規劃

文件的撰寫
範例的準備
測試的項目
如何宣傳

Releases 的準備

剖析一個開源專案

一個典型的開源專案細節

人物

作者 : 專案的發起者。
擁有者 : 專案的主要核心成員，有權限直接修改專案的管理員。
維護者 : 維護專案與開發，同時參與專案的方向和組織的管理。
貢獻者 : 只要是爲專案做出了貢獻的人，包含抖內。
社群成員 : 會積極的參與專案討論的使用者們，表達他們對專案走向的看法。

說明文件

許可協議（LICENSE）: 根據開源定義每個開源專案都必須有個開源許可協議。
README : 就是一個說明書，它通常會解釋專案有何用處，為何發起，以及如何快速入門等。
貢獻（CONTRIBUTING）: 幫助人認識與使用專案，「貢獻」這個文件則是針對想對專案貢獻的人寫的指南。
行爲準則（CODE_OF_CONDUCT）: 這份文件裡頭設立了基本規範來約束參與者的行為 (非必要)。
其它文件 : 有些專案也許還有其它文件，例如教學、專案導覽，這在大型專案中常見。

社群

問題追蹤（Issue tracker）: 一些專案討論過程，人們討論專案相關問題的地方。
請求提取（Pull requests）: 給人們檢查程式碼、以及相關問題的討論。
即時在線聊天 : 大部分專案會使用聊天頻道（例如 Slack 或 Discord）、協作和快速的交換意見。

開始使用 Vite

library 格式

格式	説明
my-library.cjs.js	CommonJS 版本
my-library.es.js	ES 模塊版本
my-library.iife.js	即時調用函數表達式版本

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'MyLibrary',
      formats: ['es', 'cjs', 'iife']
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

# vite.config.js

# index.js

export { default as MEmailInput } from "./MEmailInput.vue";
export { default as MPureTable } from "./MPureTable.vue";

https://github.com/vueuse/vue-demi

支援 Vue2 跟 Vue3 的神器

import { ref, reactive } from 'vue-demi';

橫跨框架的組件開發

Web Component

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components

使用 Vue3 開發 Web Component 入門

https://reurl.cc/LAokxK

README 撰寫

項目名稱和一行簡介
詳細描述
重點功能介紹
安裝指南
使用示例
授權條款
聯絡方式和支援
感謝

README 撰寫的重點項目

Shields.io ( https://shields.io/ )
Badgen (https://badgen.net/)
NodeICO (https://nodei.co/)
ForTheBadge (https://forthebadge.com/)

精美的 icon 服務

GitHub Readme Stats

https://github.com/anuraghazra/github-readme-stats

產生專案參與者頭像

https://contrib.rocks/preview?repo=nuxt%2Fnuxt

文件網站開發 VitePress

https://vitepress.dev/

準備上傳囉...

{
  "name": "mike-vue-ui",
  "version": "0.0.1",
  "description": "Mike 的 Vue UI 框架",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "push": "git push && npm publish"
  },
  "type": "module",
  "main": "dist/mike-vue-ui.cjs.js",
  "module": "dist/mike-vue-ui.es.js",
  "unpkg": "dist/mike-vue-ui.iife.js",
  "files": [
    "dist"
  ],
  "author": "mike cheng <https://github.com/MikeCheng1208/> (https://github.com/MikeCheng1208/)",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MikeCheng1208/mike-vue-ui.git"
  },
  "bugs": {
    "url": "https://github.com/MikeCheng1208/mike-vue-ui/issues"
  },
  "homepage": "https://github.com/MikeCheng1208/mike-vue-ui",
  "keywords": [
    "vue",
    "vue2",
    "vue3",
    "vite",
    "components",
    "ui"
  ]
}

# package.json

登入 : npm adduser & npm login
上傳 : npm publish

每次上傳版本號都不能一樣

版本號的定義

主版本號.子版本號.[修正版本號]

major.minor.[revision]

主版本號的異動 : 發生在重大更新，架構的全局性改變，造成舊版號無法向後兼容。

子版本號 : 也可以有重大更新，但不同於主版本，他的異動是有顧到向後兼容性。

修正版本號 : 顧名思義，bug的修復或是小部分改善，就會歸在這個版次，這也是最頻繁推進的版號。

開發的準備

申請 github 跟 npm 帳號
選一個小組長
討論各自要開發的 ui 組件
開個群組各自準備交換組件
統整跟整理問題討論

延伸現有的 UI 功能去開發
朝自己想要的功能去開發
工作上有遇到的需求開發
整合現有的 lib 去延伸功能
照抄

發想

Buttons
Forms
Dialog
Forms
label
Card
Video
Nav
Slider
Layout
Image
Video

常見的組件類型

不一定要整包都是不同類型的，也可以同一個類型去做延伸!

vue-final-modal

https://v3.vue-final-modal.org/zh-hant/

https://reurl.cc/EoNn1m

簡報網址

{ 請使用我提供的模板 }

https://github.com/MikeCheng1208/vue3-workshop-template

範例

https://github.com/MikeCheng1208/mike-vue-ui

給大家的建議

評估功能與開發時間
有遇到問題需要支援隊友
多去參考市面上現有的 UI 功能
是否團隊使用 TypeScript
多去思考要怎麼解決人遇到的問題
請不要使用 Chat GPT

先加入我的 LINE 官方帳號

＠mike_cheng

討論完的組別可以先來跟我討論 !!!

工商時間

限時優惠折扣碼 1200 元 : vueconf

https://thecodingpro.com/courses/nuxt3