使用 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";

支援 Vue2 跟 Vue3 的神器

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

橫跨框架的組件開發

Web Component

使用 Vue3 開發 Web Component 入門

README 撰寫

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

README 撰寫的重點項目

精美的 icon 服務

GitHub Readme Stats

產生專案參與者頭像

文件網站開發 VitePress

準備上傳囉...

{
  "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的修復或是小部分改善,就會歸在這個版次,這也是最頻繁推進的版號。

開發的準備

  1. 申請 github 跟 npm 帳號
  2. 選一個小組長
  3. 討論各自要開發的 ui 組件
  4. 開個群組各自準備交換組件
  5. 統整跟整理問題討論
  • 延伸現有的 UI 功能去開發
  • 朝自己想要的功能去開發
  • 工作上有遇到的需求開發
  • 整合現有的 lib 去延伸功能
  • 照抄

發想

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

常見的組件類型

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

vue-final-modal

https://reurl.cc/EoNn1m

簡報網址

{ 請使用我提供的模板 }

範例

給大家的建議

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

先加入我的 LINE 官方帳號

@mike_cheng

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

工商時間

限時優惠折扣碼 1200 元vueconf

https://thecodingpro.com/courses/nuxt3

哪裡可以找到我 ?

Vue conf # Workshop

By mikecheng1208

Vue conf # Workshop

  • 424