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