Nuxt.js 學習筆記

起源

最主要的原因時使用vue-cli搭建的SPA（單頁應用）不利於搜索引擎的SEO操作。搜索引擎對SPA的抓取並不好，特別是百度根本沒法抓取到SPA的內容頁面，所以我們必須把我們的應用在服務端渲染成適合搜索引擎抓取的頁面，再下載到客戶端。

Nuxt.js是Vue.js的通用框架，最常用的就是用來作SSR（服務器端渲染）。再直白點說，就是Vue.js原來是開發SPA（單頁應用）的，但是隨着技術的普及，很多人想用Vue開發多頁應用，並在服務端完成渲染。這時候就出現了Nuxt.js這個框架，她簡化了SSR的開發難度。還可以直接用命令把我們制作的vue項目生成為靜態html。

第一章 Nuxt.js介紹

Nuxt.js 是一個基於 Vue.js 的通用應用框架。

通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

優點：

• 基於 Vue.js
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步數據
• 靜態文件服務
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML頭部標簽管理
• 本地開發支持熱加載
• 集成ESLint
• 支持各種樣式預處理器： SASS、LESS、 Stylus等等

第二章 Nuxt.js環境搭建

首先，本機需要有node環境，這邊不再闡述（均在命令行進行）。

1.安裝vue-cli腳手架

npm install vue-cli -g

查看是否安裝成功

vue -V

2.首先創建項目存放位置，即項目名稱（盤符自選）

mkdir appName

3.進入項目目錄，初始化Nuxt.js項目

cd appName

vue init nuxt/starter

會詢問你項目的名稱、作者之類的信息，自行填寫。

4.安裝依賴包

npm install

5.啟動服務

npm run dev

6.此時，在瀏覽器輸入localhost:3000，即可看到界面效果（如下圖）。

現在，我們修改項目目錄下的/pages/index.vue文件section里的內容為“HelloWorld”保存，瀏覽器中內容會熱更新替換為“HelloWorld”。

第三章 Nuxt.js目錄結構

參考Nuxt.js官網

|-- .nuxt                            // Nuxt自動生成，臨時的用於編輯的文件，build
|-- assets                           // 用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
|-- components                       // 用於自己編寫的Vue組件，比如滾動組件，日歷組件，分頁組件
|-- layouts                          // 布局目錄，用於組織應用的布局組件，不可更改。
|-- middleware                       // 用於存放中間件
|-- pages                            // 用於存放寫的頁面，我們主要的工作區域
|-- plugins                          // 用於存放JavaScript插件的地方
|-- static                           // 用於存放靜態資源文件，比如圖片
|-- store                            // 用於組織應用的Vuex 狀態管理。
|-- .editorconfig                    // 開發工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore                       // 配置git不上傳的文件
|-- nuxt.config.json                 // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操作
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

第四章 修改配置項

1.配置IP和端口號

修改項目根目錄package.json文件（如下圖）

注意：修改配置文件、新增頁面必須重啟服務

此時，在瀏覽器地址欄輸入http://127.0.0.1:8888，即可預覽項目。

 2.配置全局css

在目錄/assets下新建css文件夾、在css文件夾下新建reset.css文件，寫入

html {
  padding: 0;
  margin: 0;
  color: red;
}

修改根目錄下的nuxt.config.js文件（如圖）：

修改完以后，保存，頁面效果會跟着變化。

這時候省查元素，head標簽里就會正常引入reset.css文件樣式了。

更多配置參考Nuxt官網配置。

第五章 Nuxt的路由與傳參

Nuxt.js對路由進行了封裝，無需像vue一樣配置route/index.js，是自動生成的在目錄/.nuxt/router.js。

1.創建一個簡單的路由

我們在/pages下創建兩個文件夾news和product，在文件夾下分別創建兩個頁面list和detail（如圖）。

當我們創建完頁面，會發現目錄/.nuxt/router.js文件已經自動生成路由。多級路由后面再說。

現在填充頁面內容：

/pages/index頁面：

<template>
  <section>
    <div>
      Index
      <nuxt-link to="/news/list">news</nuxt-link>
      <nuxt-link to="/product/list">product</nuxt-link>
    </div>
  </section>
</template>

/pages/news/list頁面：

<template>
  <section>
    <div>
      News/List
      <nuxt-link to="/">index</nuxt-link>
      <nuxt-link to="/news/detail">news detail</nuxt-link>
    </div>
  </section>
</template>

/pages/news/detail頁面：

<template>
  <section>
    <div>
      News/Detail
      <nuxt-link to="/">index</nuxt-link>
    </div>
  </section>
</template>

/pages/product/list頁面：

<template>
  <section>
    <div>
      Product/List
      <nuxt-link to="/">index</nuxt-link>
      <nuxt-link to="/product/detail">product detail</nuxt-link>
    </div>
  </section>
</template>

/pages/product/detail頁面：

<template>
  <section>
    <div>
      Product/Detail
      <nuxt-link to="/">index</nuxt-link>
    </div>
  </section>
</template>

頁面填充完畢，這邊使用的“nuxt-link”類似於“router-link”。點擊鏈接即可實現跳轉。

2.頁面跳轉傳參

 

未完待續、、、