在 Nuxt 專案中使用 Sass 和 Vue3 Composition API

2021/03/27閱讀時間約 2 分鐘
NuxtJS
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。

參考資料:

感謝您的閱讀,我試著將生活與自己所學到的知識,以平易近人的方式傳達給正在努力進步的同好,甚至是領域之外卻有興趣的人。如果喜歡我的文章,歡迎贊助我,你的鼓勵也是我進步的動力。
為什麼會看到廣告
37會員
32內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
發表第一個留言支持創作者!