Nuxt.js 入門

更新於 2025/02/16發佈於 2023/02/17閱讀時間約 3 分鐘

1. 安裝node.js

2. 建立專案:

$ npx create-nuxt-app {project_name}

接著會詢問一些初始化設定的東西，按照需求選擇即可:

3. 執行

$npm run dev

打開http://localhost:3000/ 即可看到畫面。

components

在about頁面中引用Test123元件:

static

存放靜態資源，像是favicon.ico, robots.txt等。

nuxt.config.js

可以用來設定global head 與 global css，每頁共同的部分很好用。

在Nuxt中使用SCSS

1. 安裝sass-loader

$ npm install --save-dev sass sass-loader@10

2. 詳細用法參考我這篇: SCSS入門 - 在Vue中使用SCSS

Global CSS

在nuxt.config.js中的css區塊，設定global css位置:

css: [
　　'@/assets/scss/main.scss'
],

頁面展示:

本筆記參考:
1. https://juejin.cn/post/7025184286873485319
2. https://www.nuxtjs.cn/guide/installation
3. https://juejin.cn/post/6991299475499122702
4. https://medium.com/web-design-zone/%E5%BB%BA%E7%AB%8Bnuxt-js%E5%B0%88%E6%A1%88%E5%88%9D%E9%AB%94%E9%A9%97-21920735e38b
5. https://nuxtjs.org/docs/configuration-glossary/configuration-css/

#Nuxt

留言

留言分享你的想法！

Vic Lin的沙龍

20會員

161內容數

Vic Lin的沙龍的其他內容

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

前情提要由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。菜單由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

看更多

你可能也想看

方格子 vocus 官方沙龍

沙龍介面新登場！自訂你的創作空間，讓好內容被看見

沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。改版完成後可以在社群媒體分享新版面，並標記 @vocus.official⁠ ♥️ ⁠

#vocus#方格子#方格子沙龍

2025/06/12

方格子 vocus 官方沙龍

沙龍介面新登場！自訂你的創作空間，讓好內容被看見

#vocus#方格子#方格子沙龍

2025/06/12

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界所得稅線上申報

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

2025/05/03

Nuxt 的安裝流程，一起來試試看吧

2024/03/15

Nuxt 的安裝流程，一起來試試看吧

2024/03/15

Vue 筆記，Nuxt 簡介

2023/11/21

Vue 筆記，Nuxt 簡介

2023/11/21

安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後，安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用: pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一

2023/02/17

2023/02/17

1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。假設在pages資料夾下新增一個如下內容的a

2023/02/17

2023/02/17

在寫頁面之前，先來介紹 Vue 頁面結構。首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔

2022/10/05

2022/10/05

專案建好了，那先來講 Vue 的專案架構詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .

2022/10/05

2022/10/05

[2] Vue: getting started

前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一

#網頁開發

2022/10/05