Vic Lin的沙龍

Nuxt 3 安裝與入門

Vic Lin-avatar-img
Vic Lin
閱讀時間約 1 分鐘
  1. 安裝Node.js
  2. 使用nuxi建立nuxt 3 專案:
$ npx nuxi init hello_nuxt_3
3. 進入專案目錄後，安裝相關套件:
$ npm install
4. 啟動nuxt:
$ npm run dev
  • 跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
  • pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一個test page:
  • nuxt.config.ts:
其中紅框的部分是import global local js的方法，這邊無法像global css那樣使用@，綠框vite的部分則是Enable hot reload:
本筆記參考:
  1. https://nuxt.com/docs/getting-started/installation
  2. https://ithelp.ithome.com.tw/articles/10293273
  3. https://github.com/nuxt/nuxt/issues/12662
為什麼會看到廣告
avatar-img
Vic Lin的沙龍
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
Vic Lin的沙龍 的其他內容
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Laravel 使用 Google Calendar API
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面，選擇專案。 後記:
#Laravel#Google#Calendar
Laravel collection map
Example code: $data['items']: $items: 本筆記參考: 1. https://docfunc.com/posts/36/foreacharraymap-%E8%88%87-laravel-collection-post
#Laravel
cURL error 60: SSL certificate problem
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣，放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
Reset CSS 與 Normalize.css
每個HTML元素都會有預設的CSS設定，但由於各家瀏覽器預設值沒有統一，就可能導致同樣的程式碼在不同瀏覽器呈現結果不同，比如在Chrome排版看起來正常，但到Safari看起來卻跑版了。因此，Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
#ResetCSS#Normalizecss
Java abstract class 與 interface 的差別
abstract class = 抽象類別 interface = 介面 抽象類別與介面都無法建立物件。 1. 使用abstract關鍵字來建立抽象類別，interface關鍵字建立介面。 interface只能繼承interface，且可以繼承多個:
#Java#OOP
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Laravel 使用 Google Calendar API
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面，選擇專案。 後記:
#Laravel#Google#Calendar
Laravel collection map
Example code: $data['items']: $items: 本筆記參考: 1. https://docfunc.com/posts/36/foreacharraymap-%E8%88%87-laravel-collection-post
#Laravel
cURL error 60: SSL certificate problem
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣，放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
Reset CSS 與 Normalize.css
每個HTML元素都會有預設的CSS設定，但由於各家瀏覽器預設值沒有統一，就可能導致同樣的程式碼在不同瀏覽器呈現結果不同，比如在Chrome排版看起來正常，但到Safari看起來卻跑版了。因此，Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。 Reset CSS
#ResetCSS#Normalizecss
Java abstract class 與 interface 的差別
abstract class = 抽象類別 interface = 介面 抽象類別與介面都無法建立物件。 1. 使用abstract關鍵字來建立抽象類別，interface關鍵字建立介面。 interface只能繼承interface，且可以繼承多個:
#Java#OOP
你可能也想看
Google News 追蹤
avatar-avatar
方格子 vocus 官方沙龍
2024/10/21
Thumbnail
「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！ 秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
#天天秋嗨嗨#秋季旅遊#秋季穿搭
avatar-avatar
MimiVsJames的美股投資分享
2024/11/13
Thumbnail
11/20 NVDA財報前Preview, 財報前股價波動走勢觀察
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
#美股#美股投資#投資理財
avatar-avatar
Ethan的沙龍
2024/02/27
Thumbnail
維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比
Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。 曾經，我的保養程序簡單到只包括清潔和隨意上乳液
#保養#產品#分享
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
2024/03/15
Thumbnail
Nuxt 安裝流程
Nuxt 的安裝流程，一起來試試看吧
#程式#程式筆記#前端
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
2024/03/15
Thumbnail
Nuxt | 一個框架的框架
對，沒錯。Nuxt 是一個框架 (Vue) 的框架。
#程式#程式筆記#前端
avatar-avatar
Thomas Chu 的沙龍
2024/01/01
Thumbnail
Nuxt3 - 在運行時改變「環境變數」
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容 前端架構 最常見的 front 架構，就是把專案 buil
#Nuxt3#frontend
avatar-avatar
Andy Tsou的沙龍
2023/12/24
Thumbnail
[Nuxt3] 如何支援 iOS13 InApp WebView
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
#Nuxt3#Vue#iOS
avatar-avatar
Jeremy Ho的沙龍
2023/11/21
Thumbnail
Vue3 筆記 | Nuxt
Vue 筆記，Nuxt 簡介
#Vue#Nuxt
avatar-avatar
姜法誠的沙龍
2022/11/17
Thumbnail
proxmox-ve 7.2 安裝記錄-登入與升級
登入系統 安裝好 prｏxmox-ve 後，就可以用瀏覽器來登入管理介面。 登入的連結網址在你安裝 proxmox-ve 的電腦畫面上，以下圖為例則為： https://192.166.10.14:8006 預設語言(Language)是 English，可以選擇改為 Chinese(Traditi
#prｏxmox#ve#虛擬系統
avatar-avatar
瓶裝雪的沙龍
2022/08/08
Thumbnail
瓶裝雪 | 個人品牌的入門與重要性
我將會藉由這個系列紀錄下我在這條路上的心血，以及經歷過的考驗，給予決定踏入網路潮流的旅人一點參考，讓我們一起經營這網路上的第二身份吧！
#個人品牌
avatar-avatar
投資日記的沙龍
2022/06/09
Thumbnail
【黃金投資入門與技巧】倉位管理不可忽略！
黃金天生具有保值避險功能，近幾年市場避險情緒變得濃郁，這類避險保值產品變得更加受歡迎。在黃金市場有不同的黃金產品，有穩健的實物黃金也有高收益的現貨黃金，下麵為大家講講黃金投資入門與技巧，倉位管理學起來！ 掌握黃金投資倉位管理知識 瞭解現貨黃金交易規則 選擇微點差帳戶交易成本更小
#黃金投資入門與技巧#黃金投資入門#黃金投資
avatar-avatar
GPT工作術｜與你一起補給工作的AI能量沙龍
2022/03/31
Thumbnail
1992年在電腦裝中文輸入法有多困難？能夠在 Dos/Windows 3.1安裝輸入法,那你一定是電腦高手！(下集)
承接昨天的「古董軟體紙盒開箱」（國音輸入法），今天是下集（因為過去的軟體紙盒内容物太多了...） 因為「國音輸入法」同時支援 Dos 5.0 與 Windows 3.1 （不是 Win 95 也不是 WinXP哦），所以還需要另一份說明！
#懷舊#軟體#電腦
avatar-avatar
GPT工作術｜與你一起補給工作的AI能量沙龍
2022/03/30
Thumbnail
1992年:在電腦裝中文輸入法有多困難？有能力在 Dos/Windows 3.1安裝輸入法,那你一定是電腦高手!(上集)
珍貴的古董軟體安裝包開箱: 在當時的電腦還是少數人的高(貴)科技產品，並且 Windows 95 都尚未出現的年代，如果購買一了個中文輸入法的「應用軟體」，會拿到什麼樣的產品内容以及有什麼功能呢？
#懷舊#軟體#電腦
avatar-avatar
方格子 vocus 官方沙龍
2024/10/21
Thumbnail
「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！ 秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
#天天秋嗨嗨#秋季旅遊#秋季穿搭
avatar-avatar
MimiVsJames的美股投資分享
2024/11/13
Thumbnail
11/20 NVDA財報前Preview, 財報前股價波動走勢觀察
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
#美股#美股投資#投資理財
avatar-avatar
Ethan的沙龍
2024/02/27
Thumbnail
維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比
Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。 曾經，我的保養程序簡單到只包括清潔和隨意上乳液
#保養#產品#分享
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
2024/03/15
Thumbnail
Nuxt 安裝流程
Nuxt 的安裝流程，一起來試試看吧
#程式#程式筆記#前端
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
2024/03/15
Thumbnail
Nuxt | 一個框架的框架
對，沒錯。Nuxt 是一個框架 (Vue) 的框架。
#程式#程式筆記#前端
avatar-avatar
Thomas Chu 的沙龍
2024/01/01
Thumbnail
Nuxt3 - 在運行時改變「環境變數」
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容 前端架構 最常見的 front 架構，就是把專案 buil
#Nuxt3#frontend
avatar-avatar
Andy Tsou的沙龍
2023/12/24
Thumbnail
[Nuxt3] 如何支援 iOS13 InApp WebView
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
#Nuxt3#Vue#iOS
avatar-avatar
Jeremy Ho的沙龍
2023/11/21
Thumbnail
Vue3 筆記 | Nuxt
Vue 筆記，Nuxt 簡介
#Vue#Nuxt
avatar-avatar
姜法誠的沙龍
2022/11/17
Thumbnail
proxmox-ve 7.2 安裝記錄-登入與升級
登入系統 安裝好 prｏxmox-ve 後，就可以用瀏覽器來登入管理介面。 登入的連結網址在你安裝 proxmox-ve 的電腦畫面上，以下圖為例則為： https://192.166.10.14:8006 預設語言(Language)是 English，可以選擇改為 Chinese(Traditi
#prｏxmox#ve#虛擬系統
avatar-avatar
瓶裝雪的沙龍
2022/08/08
Thumbnail
瓶裝雪 | 個人品牌的入門與重要性
我將會藉由這個系列紀錄下我在這條路上的心血，以及經歷過的考驗，給予決定踏入網路潮流的旅人一點參考，讓我們一起經營這網路上的第二身份吧！
#個人品牌
avatar-avatar
投資日記的沙龍
2022/06/09
Thumbnail
【黃金投資入門與技巧】倉位管理不可忽略！
黃金天生具有保值避險功能，近幾年市場避險情緒變得濃郁，這類避險保值產品變得更加受歡迎。在黃金市場有不同的黃金產品，有穩健的實物黃金也有高收益的現貨黃金，下麵為大家講講黃金投資入門與技巧，倉位管理學起來！ 掌握黃金投資倉位管理知識 瞭解現貨黃金交易規則 選擇微點差帳戶交易成本更小
#黃金投資入門與技巧#黃金投資入門#黃金投資
avatar-avatar
GPT工作術｜與你一起補給工作的AI能量沙龍
2022/03/31
Thumbnail
1992年在電腦裝中文輸入法有多困難？能夠在 Dos/Windows 3.1安裝輸入法,那你一定是電腦高手！(下集)
承接昨天的「古董軟體紙盒開箱」（國音輸入法），今天是下集（因為過去的軟體紙盒内容物太多了...） 因為「國音輸入法」同時支援 Dos 5.0 與 Windows 3.1 （不是 Win 95 也不是 WinXP哦），所以還需要另一份說明！
#懷舊#軟體#電腦
avatar-avatar
GPT工作術｜與你一起補給工作的AI能量沙龍
2022/03/30
Thumbnail
1992年:在電腦裝中文輸入法有多困難？有能力在 Dos/Windows 3.1安裝輸入法,那你一定是電腦高手!(上集)
珍貴的古董軟體安裝包開箱: 在當時的電腦還是少數人的高(貴)科技產品，並且 Windows 95 都尚未出現的年代，如果購買一了個中文輸入法的「應用軟體」，會拿到什麼樣的產品内容以及有什麼功能呢？
#懷舊#軟體#電腦