Nuxt 安裝流程
閱讀時間約 1 分鐘
環境需求
- Node：
v18.0.0或更新的版本 - 文字編輯器：Nuxt 官方推薦 VS Code + Vue - Official
原 Volar 套件(已停用)
額外補充
- Node.js: 使用偶數號的版本 (例如: 18、20)
- Nuxtr: Nuxtr extension
開始安裝
有 npx / pnpm / bun 三種可選，以下使用 npx 和 npm
- 建立初始專案 (記得更改 project name)
npx nuxi@latest init <project-name>
下指令後，它會問你要用哪種套件管理工具: npm pnpm ... 等自選
耐心等它跑完
跑完後會問你要不要初始化 git repo (真貼心)
- 以編輯器開啟
code <project-name>
- 切換到專案資料夾
cd <project-name>
- 安裝相依的套件和模組
npm install- 開啟專案
npm run dev -- -o
成功建立 👏🏻👏🏻👏🏻👏🏻
參考資料
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
本文將演示在安裝完 Kubernetes Cluster 後的基本元件安裝，包括 Calico/Calicoctl、Metric Server 和 Dashboard UI 的安裝方法以及相關問題與解決方式。
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容
前端架構
最常見的 front 架構，就是把專案 buil
前言
近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。
測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD
第一坑 Nuxt3 Announcing
Nuxt 3 officially suppo
Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便:
本筆記參考:
https://juejin.cn/post/7104071421160063012
https://juejin.cn/post/7086472647575339045
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。
巢狀路由用法:
同一層page帶動態參數用法:
跳轉頁面可直接使用nuxt-link
若是要用類似v-to的用法來存取v-for的變數，要用:to
本筆記參考:
https://it
安裝Node.js
使用nuxi建立nuxt 3 專案:
3. 進入專案目錄後，安裝相關套件:
4. 啟動nuxt:
跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一
1. 安裝node.js
2. 建立專案:
接著會詢問一些初始化設定的東西，按照需求選擇即可:
3. 執行
打開http://localhost:3000/ 即可看到畫面。
pages
Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的a
Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
本文將演示在安裝完 Kubernetes Cluster 後的基本元件安裝，包括 Calico/Calicoctl、Metric Server 和 Dashboard UI 的安裝方法以及相關問題與解決方式。
env 環境變數的設定，通常是為為了 server 而設定的，能快速的切換狀態，但現在的網頁開始，前端的範圍逐漸往後端靠近，所以在設定，也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作，分享此內容
前端架構
最常見的 front 架構，就是把專案 buil
前言
近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。
測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD
第一坑 Nuxt3 Announcing
Nuxt 3 officially suppo
Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便:
本筆記參考:
https://juejin.cn/post/7104071421160063012
https://juejin.cn/post/7086472647575339045
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。
巢狀路由用法:
同一層page帶動態參數用法:
跳轉頁面可直接使用nuxt-link
若是要用類似v-to的用法來存取v-for的變數，要用:to
本筆記參考:
https://it
安裝Node.js
使用nuxi建立nuxt 3 專案:
3. 進入專案目錄後，安裝相關套件:
4. 啟動nuxt:
跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一
1. 安裝node.js
2. 建立專案:
接著會詢問一些初始化設定的東西，按照需求選擇即可:
3. 執行
打開http://localhost:3000/ 即可看到畫面。
pages
Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的a
Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。