Nuxt.js 入門

2023/02/17閱讀時間約 2 分鐘
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'
],
頁面展示:
為什麼會看到廣告
illustration
贊助支持創作者,成為他繼續創作的動力吧!
20會員
161內容數
留言0
查看全部
發表第一個留言支持創作者!
從 Google News 追蹤更多 vocus 的最新精選內容