Vue 3、Tailwind CSS 3、esbuild、rollup.js 開發初始檔
本文詳細介紹如何使用 Vue 3、Tailwind CSS 3、esbuild 和 rollup.js 快速開發網站。文章涵蓋了從安裝、配置到開發的完整流程，並提供了實用的代碼範例和技巧，幫助開發者提升開發效率和產品質量。
Vue.js 3 Composition API 基本學習筆記-2：fetch data、export / import
本篇大綱：本篇要解決的問題。Fetch Data 取資料。export、import。export、import + props。在上一篇學會了基本的 Composition API 的使用，接著這一篇是要寫最重要的，API 取回資料後更新，以及 import、export。
Vue.js 3 Composition API 基本學習筆記-1：Ref、Props、watch、生命週期
本篇大綱：本篇要解決的問題。Ref。Props。watch、watchEffect、stop。生命週期。Composition API 可以把調用某支 API 的 JS code 寫成 JS 檔後，直接 import 到 .vue 檔裡，就不用每次都重複寫。
用 VuePress 製作說明文件頁面 – 6：部署
本篇大綱：本篇要解決的問題。部署之前必備、GitHub 帳號、VuePress 檔案。生成靜態檔。把資料夾推到 GitHub 專案上。開啟 GitHub Pages 功能。原始碼、Demo。
用 VuePress 製作說明文件頁面 – 5：改樣式、加元件
本篇大綱：本篇要解決的問題。修改樣式 Styling、palette.styl、index.styl。使用元件 Using Components、安裝預處理器、建立按鈕元件。原始碼、Demo。
用 VuePress 製作說明文件頁面 – 4：佈景主題、外掛
本篇大綱：本篇要解決的問題。安裝佈景主題。安裝外掛（插件）。原始碼、Demo。如果要跟官方的看起來不太一樣，就必需要自行安裝好其它佈景主題，不然一眼看過去就會是 Vue 的說明文件複製貼上改個字，想嚇人就只能嚇些沒看過 Vue 文件的。
用 VuePress 製作說明文件頁面 – 3：導覽列
本篇大綱：本篇要解決的問題。Navbar 頂部導覽列、Logo、靜態檔放 public 中、Repository 連結、導覽列連結。Sidebar 側邊導覽列、一般單純連結、將連結分組。原始碼、Demo。
用 VuePress 製作說明文件頁面 – 2：config.js 基本設定
本篇大綱：本篇要解決的問題。極重要的目錄結構。建立 config.js。Config 基本設定部份、title、description、base、head、dest、原始碼、Demo。本系列第二篇，來整理 config.js 上可以有哪些基本設定。
用 VuePress 製作說明文件頁面 – 1：安裝
本篇大綱：本篇要解決的問題。安裝前必備。安裝 VuePress。建立首頁。注意事項。之前忘了在哪看到 VuePress 這套開箱即用的靜態網站生成器，想說平常都在用 Vue 了，那不如就用用看這套，看能不能把所有要用的 components 及範例都整理成一個有模有樣的頁面。
Vue CLI 安裝 Tailwind CSS
本篇大綱：本篇要解決的問題。安裝 Tailwind CSS -none、minimal、full。postcss.config.js。Google 了一下後，在 npm 上發現有一個套件可以直接安裝，而且容易上手，就整理成這篇。
用 Vue.js 製作圖片版 EDM 生成器
本篇大綱：本篇要解決的問題。預覽、產出的HTML，要分開。用 replace 替代 hack，補上 width、html。檔案包成 zip 的套件：JSZip、FileSaver.js。抓圖檔要用 FileReader。JSZip 抓圖檔，要刪掉 base64 的開頭。demo 及原始檔下載。
用 Storybook 做一個 UI 整理集
本篇大綱：本篇要解決的問題。安裝。整理檔案架構。檔案介紹。使用 Pug、Sass。在 Storybook 上使用標題跟資料夾的層級。輸出成靜態檔。範例程式碼。
Recent Comments