安裝Node.js
使用nuxi建立nuxt 3 專案:
3. 進入專案目錄後，安裝相關套件:
4. 啟動nuxt:
跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一

學習

職場產業

音樂藝文

<ol>
  <li class="draft-block draft--li">安裝Node.js</li>
  <li class="draft-block draft--li">使用nuxi建立nuxt 3 專案:</li>
</ol>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">$ npx nuxi init hello_nuxt_3</pre></pre>
<div class="draft--imgNormal draft-block"><div><div style="height:783px" class="image-block-prerender" data-src="https://images.vocus.cc/ab175bd4-d032-45ef-ae71-94d339622fb5.png" data-width="783" data-height="178" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">3. 進入專案目錄後，安裝相關套件:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">$ npm install</pre></pre>
<div class="draft--imgNormal draft-block"><div><div style="height:757px" class="image-block-prerender" data-src="https://images.vocus.cc/b485d9fa-7beb-42eb-843e-58f375380162.png" data-width="757" data-height="370" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">4. 啟動nuxt:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">$ npm run dev</pre></pre>
<div class="draft--imgNormal draft-block"><div><div style="height:884px" class="image-block-prerender" data-src="https://images.vocus.cc/c3387858-6ddc-4222-83a8-baedfdc59ba4.png" data-width="884" data-height="363" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:1536px" class="image-block-prerender" data-src="https://images.vocus.cc/da836cd7-d842-4dfe-b07a-97d2d7b982b3.png" data-width="1536" data-height="820" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="hr__AtomHrContainer-sc-1afmttx-0 dsBIOm draft-block"><pre class="hr__HrWrapper-sc-1afmttx-1 hUbgX draft--hr"><hr class="hr__Hr-sc-1afmttx-2 iegMSY"></pre></div>
<ul>
  <li class="draft-block draft--li">跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:</li>
</ul>
<div class="draft--imgNormal draft-block"><div><div style="height:859px" class="image-block-prerender" data-src="https://images.vocus.cc/628f052e-dea4-49a0-b589-bee0a0033785.png" data-width="859" data-height="354" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:931px" class="image-block-prerender" data-src="https://images.vocus.cc/5f773868-9d15-412d-90f0-dea5c430fae1.png" data-width="931" data-height="380" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:285px" class="image-block-prerender" data-src="https://images.vocus.cc/75e00207-3854-4d1d-8a34-46410b67d33e.png" data-width="285" data-height="159" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<ul>
  <li class="draft-block draft--li">pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一個test page:</li>
</ul>
<div class="draft--imgNormal draft-block"><div><div style="height:1076px" class="image-block-prerender" data-src="https://images.vocus.cc/c6fb0bfe-1578-4cfe-acf1-d8ece4f85c3a.png" data-width="1076" data-height="437" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:311px" class="image-block-prerender" data-src="https://images.vocus.cc/320aa4ff-a609-4978-984d-8761c57c2a82.png" data-width="311" data-height="166" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<ul>
  <li class="draft-block draft--li">nuxt.config.ts:</li>
</ul>
<div class="draft-block draft--p left">其中紅框的部分是import global local js的方法，這邊無法像global css那樣使用@，綠框vite的部分則是Enable hot reload:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1580px" class="image-block-prerender" data-src="https://images.vocus.cc/fd3d846b-5097-4bea-923d-72f3db1df43f.png" data-width="1580" data-height="703" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"><span style="font-style: italic; ">本筆記參考:</span></div>
<ol>
  <li class="draft-block draft--li"><a href="https://nuxt.com/docs/getting-started/installation" target="_blank" class="draft--a"><span style="font-style: italic; ">https://nuxt.com/docs/getting-started/installation</span></a></li>
  <li class="draft-block draft--li"><a href="https://ithelp.ithome.com.tw/articles/10293273" target="_blank" class="draft--a"><span style="font-style: italic; ">https://ithelp.ithome.com.tw/articles/10293273</span></a></li>
  <li class="draft-block draft--li"><a href="https://github.com/nuxt/nuxt/issues/12662" target="_blank" class="draft--a"><span style="font-style: italic; ">https://github.com/nuxt/nuxt/issues/12662</span></a></li>
</ol>
<div class="draft-block draft--p left"></div>

3. 進入專案目錄後，安裝相關套件:

跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:

pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一個test page:

其中紅框的部分是import global local js的方法，這邊無法像global css那樣使用@，綠框vite的部分則是Enable hot reload:

https://nuxt.com/docs/getting-started/installation

https://ithelp.ithome.com.tw/articles/10293273

https://github.com/nuxt/nuxt/issues/12662

Nuxt 3 安裝與入門

1. 安裝node.js
2. 建立專案:
接著會詢問一些初始化設定的東西，按照需求選擇即可:
3. 執行
打開http://localhost:3000/ 即可看到畫面。
pages
Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的a