使用 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 撰寫的重點項目
- Shields.io ( https://shields.io/ )
- Badgen (https://badgen.net/)
- NodeICO (https://nodei.co/)
- ForTheBadge (https://forthebadge.com/)
精美的 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的修復或是小部分改善，就會歸在這個版次，這也是最頻繁推進的版號。
開發的準備
- 申請 github 跟 npm 帳號
- 選一個小組長
- 討論各自要開發的 ui 組件
- 開個群組各自準備交換組件
- 統整跟整理問題討論
- 延伸現有的 UI 功能去開發
- 朝自己想要的功能去開發
- 工作上有遇到的需求開發
- 整合現有的 lib 去延伸功能
照抄
發想
- Buttons
- Forms
- Dialog
- Forms
- label
- Card
- Video
- Nav
- Slider
- Layout
- Image
- Video
常見的組件類型
不一定要整包都是不同類型的，也可以同一個類型去做延伸!
vue-final-modal
https://reurl.cc/EoNn1m
簡報網址
{ 請使用我提供的模板 }
範例
給大家的建議
- 評估功能與開發時間
- 有遇到問題需要支援隊友
- 多去參考市面上現有的 UI 功能
- 是否團隊使用 TypeScript
- 多去思考要怎麼解決人遇到的問題
- 請不要使用 Chat GPT
先加入我的 LINE 官方帳號
＠mike_cheng
討論完的組別可以先來跟我討論 !!!
工商時間
限時優惠折扣碼 1200 元 : vueconf
https://thecodingpro.com/courses/nuxt3
哪裡可以找到我 ?
Vue conf # Workshop
By mikecheng1208
