Nuxt.js項目安裝和目錄介紹

一 Nuxt.js環境初始化

1 解壓

解壓 guli_site

2 端口修改

項目默認3000端口啓動，如果想要修改Nuxt.js的啓動端口，則可以在package.json文件中添加如下配置

"config": {
  "nuxt": {
    "host": "127.0.0.1",
    "port": "3333"
  }
}

3 安裝依賴

npm install

4 運行項目

npm run dev

二 頁面佈局結構

1 佈局組件

頁頭和頁尾提取出來，形成佈局頁

2 佈局文件

layouts目錄下default.vue，引用佈局組件

<nuxt />：主內容佔位符

3 首頁面

pages/index.vue，默認使用layouts目錄下default.vue佈局文件

index.vue中的頁面內容會被自動嵌入到模板文件的 <nuxt/> 的位置