Nuxt.js 入門

閱讀時間約 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'
],
頁面展示:
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面,選擇專案。 後記:
Example code: $data['items']: $items: 本筆記參考: 1. https://docfunc.com/posts/36/foreacharraymap-%E8%88%87-laravel-collection-post
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣,放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
abstract class = 抽象類別 interface = 介面 抽象類別與介面都無法建立物件。 1. 使用abstract關鍵字來建立抽象類別,interface關鍵字建立介面。 interface只能繼承interface,且可以繼承多個:
SCSS與SASS都是CSS預處理器,可以幫助開發者更方便管理CSS程式碼,而SASS寫法上不須加上「{} ;」,而是用縮排來簡化,SCSS寫法上則類似CSS,可以兼容CSS語法,SASS則無法兼容CSS語法,以下將以SCSS為主來說明。 CSS/SCSS/SASS寫法差別 安裝scss編譯器
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面,選擇專案。 後記:
Example code: $data['items']: $items: 本筆記參考: 1. https://docfunc.com/posts/36/foreacharraymap-%E8%88%87-laravel-collection-post
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣,放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
abstract class = 抽象類別 interface = 介面 抽象類別與介面都無法建立物件。 1. 使用abstract關鍵字來建立抽象類別,interface關鍵字建立介面。 interface只能繼承interface,且可以繼承多個:
SCSS與SASS都是CSS預處理器,可以幫助開發者更方便管理CSS程式碼,而SASS寫法上不須加上「{} ;」,而是用縮排來簡化,SCSS寫法上則類似CSS,可以兼容CSS語法,SASS則無法兼容CSS語法,以下將以SCSS為主來說明。 CSS/SCSS/SASS寫法差別 安裝scss編譯器
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁,並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行,因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
過去我嘗試學習 JS 蠻多次,常常無疾而終,因為窮所以都是看網路文章、線上課程為主,會遇到的問題有: 在職學習的惰性,只要開始加班我就忘記學習 :D 寫得太少又急著看完課程,看完後就忘光了 :DD 便宜的 Udemy 課程大都是英文,聽不懂的語言+聽不懂的邏輯,放空 :DDD 六角直播班帶給我最大的
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 所有頁面每隔一段時間自動刷新 token Logout
現在您已經安裝了 WooCommerce 的 WordPress 網站,是時候配置 WooCommerce 並開始添加一些要銷售的產品了! 配置 WooCommerce 設置 在您的 WordPress 站點中,單擊 WooCommerce 菜單選項並轉到Settings。在設置頁面中,將在不同選項
Thumbnail
參加六角學院的 JS 工程師養成直播班,課程由洧杰老師擔任授課老師,總共有九週的線上直播課程以及課前知識補充的學習影片,與大家分享此次直播班的簡單心得
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁,並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行,因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
過去我嘗試學習 JS 蠻多次,常常無疾而終,因為窮所以都是看網路文章、線上課程為主,會遇到的問題有: 在職學習的惰性,只要開始加班我就忘記學習 :D 寫得太少又急著看完課程,看完後就忘光了 :DD 便宜的 Udemy 課程大都是英文,聽不懂的語言+聽不懂的邏輯,放空 :DDD 六角直播班帶給我最大的
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 所有頁面每隔一段時間自動刷新 token Logout
現在您已經安裝了 WooCommerce 的 WordPress 網站,是時候配置 WooCommerce 並開始添加一些要銷售的產品了! 配置 WooCommerce 設置 在您的 WordPress 站點中,單擊 WooCommerce 菜單選項並轉到Settings。在設置頁面中,將在不同選項
Thumbnail
參加六角學院的 JS 工程師養成直播班,課程由洧杰老師擔任授課老師,總共有九週的線上直播課程以及課前知識補充的學習影片,與大家分享此次直播班的簡單心得