帶你從不懂到搭建第一個Nuxt.js項目!

1.Nuxt.js概述

1.1.什麼是Nuxt.js?

Nuxt.js是一個基於Vue.js的輕量級應用框架,可用來建立服務端渲染(SSR)應用, 也能夠充當靜態站點引擎生成。
具備優雅的代碼結構分層和熱加載等特性。

• 官方學習網址：https://zh.nuxtjs.org/guide/installation

1.2 爲何要學習Nuxt.js?

SPA(single page web application)單頁Web應用, Web再也不是一張張頁面,
而是一個總體的應用,一個由路由系統、數據系統、頁面（組件）系統等等組成的應用程序。
    Vue.js就是SPA中的佼佼者。
    SPA應用普遍用於對SEO要求不高的場景中。

1.2.1 那什麼是SEO呢？

SEO就是 搜索引擎優化(Search Engine Optimization)，經過各類技術（手段）來確保咱們
的Web內容被搜索引擎最大化收錄，最大化提升權重，最終帶來更多流量。
    而SPA程序不利於SEO。

注: 而咱們須要解決SEO這個問題就能夠用到Nuxt.js框架來建立服務端渲染(SSR)應用。

1.2.2 那什麼是 SSR技術呢？

SSR服務端渲染（Server Side Render），即：網頁是經過服務端渲染生成後輸出給客戶端。
    將前端拆分2部分：客戶端和服務端
    服務器端渲染，就是讓前端服務端的代碼先執行，就能夠提早得到後端提供的數據

2.搭建Nuxt.js項目

• npm 提供的用於更快捷維護項目的工具npx
  • npm版本5.2.0開始npm便開始攜帶了npx,不須要另行安裝npx了

2.1 步驟一: 終端控制檯輸入命令

npx create-nuxt-app 項目名

2.2 步驟二: 選擇一系列配置與依賴

2.2.1 項目名

• 使用默認就能夠(直接敲回車Enter鍵)

2.2.2 項目描述

• 能夠不寫,直接敲回車鍵, 寫了再敲回車鍵也是同樣的

2.2.3 項目做者

• 默認就能夠了, 敲回車鍵。能夠改, 改完敲回車鍵。

項目做者以後: 若是出現選擇JavaScript或者是TypeScript的選擇第一個JavaScript便可, 沒出現請忽略這句話

2.2.4 選擇打包工具

• 這裏咱們選擇 Npm，上下鍵選擇，而後敲回車鍵

2.2.5 選擇UI框架

• 根據需求選擇（上下鍵），咱們暫時不須要任何UI框架，選擇None，敲回車鍵

2.2.6 選擇服務器框架

• 根據需求選擇（上下鍵），咱們暫時不須要任何服務器框架，選擇None，敲回車鍵

2.2.7 選擇Nuxt模塊

• 根據需求選擇（上下鍵），選到須要的後須要按下空格鍵表示選中，選完後敲回車鍵。
  • 我就選了一個Axios，用來發生ajax請求

2.2.8 選擇靜態代碼檢查工具

• 就是代碼格式化的。咱們什麼也不選，直接敲回車鍵便可。
  • 若是須要選擇，上下鍵選中，而後敲空格表示選中，而後回車鍵便可。

2.2.9 選擇測試框架

• 根據需求選擇（上下鍵），咱們暫時不須要任何測試框架，選擇None，敲回車鍵

2.2.10 選擇渲染模式

• 選擇SSR（服務器端渲染），默認就是，直接敲回車便可。
  • SSR：前端的服務器端渲染
  • SPA：單Web應用

2.2.11 選擇發佈工具

• 咱們不作選擇默認便可，直接敲回車鍵

2.2.12 開始安裝了

• 等待安裝完畢便可

• 安裝成功

2.2.13 安裝步驟完整截圖

2.3 運行項目

• 執行這兩條命令便可

2.3.1 切換到剛剛建立好的項目目錄下

2.3.2 運行執行命令

2.3.3 訪問

3.Nuxt.js項目目錄結構

4.Nuxt.js項目中使用axios

4.1. 整合axios

• 咱們在安裝時,已經選擇axios模塊

  • 證據: nuxt.confg.js配置

4.2 發送ajax

• 咱們能夠經過this.$axios得到axios對象

//get請求
this.$axios.get('路徑',{ params : 參數 })

//post請求
this.$axios.post('路徑', 參數)

//put
this.$axios.put('路徑', 參數)

//delete
this.$axios.delete('路徑')

4.2.1 實例:加載新聞列表

• 修改pages/index.vue頁面

4.2.1.1 效果

4.2.1.2 代碼

<template>
  <div>
    <h1 style="margin-left:250px">新聞列表</h1>
    <table border="1px" style="margin:auto">
      <tr>
        <th>新聞標題圖片</th>
        <th>新聞標題</th>
        <th>新聞做者</th>
        <th>新聞類型</th>
      </tr>
      <tr v-for="(news,index) in newsList" :key="index">
        <td>
          <img style="widht:100px;height:110px" :src="news.author_avatar" alt />
        </td>
        <td v-text="news.title"></td>
        <td v-text="news.author_name"></td>
        <td v-text="news.column_name"></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    };
  },
  async created() {
    /**漫路h */
    let { data } = await this.$axios.get("https://unidemo.dcloud.net.cn/api/news");
    this.newsList = data;
  }
};
</script>

<style>
</style>