在 Nuxt 專案中使用 Sass 和 Vue3 Composition API
閱讀時間約 2 分鐘
Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
建立專案
在終端機輸入執行指令 npx create-nuxt-app <project-name> 後，會進入問題面板，能按照需求選擇開發上習慣使用的工具，如套件管理工具、伺服器框架、UI 框架、測試框架、渲染模式、版本控制系統等。
不過 Nuxt 還未全面支援 Sass 和 Vue3，所以如果在 Nuxt 中使用 Sass/Scss，或是 Vue3 的 Composition API，就會報錯。
安裝 Sass
Sass 的解決方案較為容易，在終端機執行以下指令即可開始使用 Sass。
npm install --save-dev sass sass-loader@10 fiber
安裝 Composition API
Composition API 的部分，在終端機執行以下指令後，還需要到 nuxt.config.js 檔案中手動註冊模組。
npm install @nuxtjs/composition-api --save
在 nuxt.config.js 檔案中加入 Composition API：
{buildModules: ['@nuxtjs/composition-api']}
以 Header component 為例，匯入 nuxtjs/composition-api 後即可開始使用 Vue3 的 Composition API。
參考資料：
感謝您的閱讀，我試著將生活與自己所學到的知識，以平易近人的方式傳達給正在努力進步的同好，甚至是領域之外卻有興趣的人。如果喜歡我的文章，歡迎贊助我，你的鼓勵也是我進步的動力。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
Vue 提供了兩種不同的 API 來建立和管理組件：Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異，並透過實際範例來理解它們的使用方式。
Vue 的單文件組件（Single File Components，SFC）是一種特殊的文件格式，讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC，幫助開發者理解和使用 Vue SFC。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容
前端架構
最常見的 front 架構，就是把專案 buil
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
Vue 提供了兩種不同的 API 來建立和管理組件：Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異，並透過實際範例來理解它們的使用方式。
Vue 的單文件組件（Single File Components，SFC）是一種特殊的文件格式，讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC，幫助開發者理解和使用 Vue SFC。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容
前端架構
最常見的 front 架構，就是把專案 buil