前一章經 create-nuxt-app 生成的專案結構

放法按照 Nuxt 預設結構，相比 Vue.js 專案，已經幫你訂好了規則，方便對應與依循
各資料夾對應到官網文件 - Directory Structure

• assets: 放需要 webpack 編譯的靜態資源
• static: 不需要編譯的靜態資源
• pages: 各頁對應的頁面元件 (相當於你寫 SPA 時，VueRouter路由指定的元件)
• components: 跨頁面的元件，不具狀態
• nuxt.config.js: Nuxt 全域設定檔
• .nuxt: Nuxt 暫存資料夾

其他如layouts、middleware、plugins、store用到再說明

但產生頁面只用到 pages
為了乾淨，先砍掉沒用到的部分

來生張商品頁

在 pages 資料夾下新增 Product.vue

<template>
    <section class="container">
        <div>
            <h1 class="title">
                商品名稱
            </h1>
            <p class="description">
                這是商品敘述，絕對激安，錯過可惜
            </p>
            <div class="links">
                <a
                href="#"
                target="_blank"
                class="button--green">加入購物車</a>
                <a
                href="#"
                target="_blank"
                class="button--grey">立刻購買</a>
            </div>
        </div>
    </section>
</template>

回過神來，Nuxt 已自動對應好了路由
http://localhost:3000/product

下一篇解釋 Nuxt 怎麼自動映射路由