在 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。
參考資料：
感謝您的閱讀，我試著將生活與自己所學到的知識，以平易近人的方式傳達給正在努力進步的同好，甚至是領域之外卻有興趣的人。如果喜歡我的文章，歡迎贊助我，你的鼓勵也是我進步的動力。
為什麼會看到廣告
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢，比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具，並強調安全注意事項及個人需求評估的重要性。
臺南永康區的鶴昇町拉麵，份量足、價格實惠，是午餐好選擇！招牌野菜叉燒豚骨拉麵湯頭濃鬱、叉燒軟嫩；蔥盛醬油豚骨拉麵香氣十足；地獄麻辣叉燒乾拌麵微辣夠味；叉燒飯、玉子燒、臺式泡菜等配菜也都很美味，搭配阿里山冷泡茶或莓果醋更完美！
悄虎是我們來到美國第三年才加入，他一出生，就是一個價值千萬的尊貴寶寶，這都得感謝美國那黑心的醫療保險制度，其中一項「帶病投保條款」（pre-existing condition） 讓人心寒。
哈囉，大家好！本次介紹如何在 Nuxt 應用中使用 Axios 整合 Laravel 後端 API，實現動態資料渲染並搭建身份驗證機制。透過 Axios 配置與 Vuex 狀態管理，建立交易紀錄頁面並添加錯誤處理，提供更友善的使用者體驗。
一開始你先把你的專案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 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢，比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具，並強調安全注意事項及個人需求評估的重要性。
臺南永康區的鶴昇町拉麵，份量足、價格實惠，是午餐好選擇！招牌野菜叉燒豚骨拉麵湯頭濃鬱、叉燒軟嫩；蔥盛醬油豚骨拉麵香氣十足；地獄麻辣叉燒乾拌麵微辣夠味；叉燒飯、玉子燒、臺式泡菜等配菜也都很美味，搭配阿里山冷泡茶或莓果醋更完美！
悄虎是我們來到美國第三年才加入，他一出生，就是一個價值千萬的尊貴寶寶，這都得感謝美國那黑心的醫療保險制度，其中一項「帶病投保條款」（pre-existing condition） 讓人心寒。
哈囉，大家好！本次介紹如何在 Nuxt 應用中使用 Axios 整合 Laravel 後端 API，實現動態資料渲染並搭建身份驗證機制。透過 Axios 配置與 Vuex 狀態管理，建立交易紀錄頁面並添加錯誤處理，提供更友善的使用者體驗。
一開始你先把你的專案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 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。