2023-02-17|閱讀時間 ‧ 約 3 分鐘

Nuxt.js 入門

1. 安裝node.js
2. 建立專案:
$ npx create-nuxt-app {project_name}
接著會詢問一些初始化設定的東西,按照需求選擇即可:
3. 執行
$npm run dev
打開http://localhost:3000/ 即可看到畫面。

pages
  • Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的about.vue,瀏覽about頁面:

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'
],
頁面展示:

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.