nuxt框架快速入門

1.服務端渲染技術nuxt

1.1什么是服務器端渲染

服務端渲染又稱SSR (Server Side Render)是在服務端完成頁面的內容，而不是在客戶端通過AJAX獲取數據。

服務器端渲染(SSR)的優勢主要在於：更好的 SEO，由於搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。

如果你的應用程序初始展示 loading 菊花圖，然后通過 Ajax 獲取內容，抓取工具並不會等待異步完成后再進行頁面內容的抓取。也就是說，如果 SEO 對你的站點至關重要，而你的頁面又是異步獲取內容，則你可能需要服務器端渲染(SSR)解決此問題。

另外，使用服務器端渲染，我們可以獲得更快的內容到達時間(time-to-content)，無需等待所有的 JavaScript 都完成下載並執行，產生更好的用戶體驗，對於那些「內容到達時間(time-to-content)與轉化率直接相關」的應用程序而言，服務器端渲染(SSR)至關重要。

1.2什么是nuxt

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

官網網站：https://zh.nuxtjs.org/

2.nuxt環境初始化

2.1下載安裝包

https://github.com/nuxt-community/starter-template/archive/master.zip

將template中的內容復制到一個自己創建的項目下面

2.2修改package.json

name、description、author（必須修改這里，否則項目無法安裝）

  "name": "onlinename",
  "version": "1.0.0",
  "description": "description",
  "author": "test",

2.3修改nuxt.config.js

修改title: '{{ name }}'、content: '{{escape description }}'， 這里的設置最后會顯示在頁面標題欄和meta數據中

  head: {
    title: 'online',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'description' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

2.4安裝依賴

修改完配置文件之后可以通過命令npm install 來安裝依賴

2.5測試運行

通過 npm run dev 來啟動項目

3.nuxt 目錄結構

 

 （1）資源目錄 assets

 用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript。

（2）組件目錄 components

用於組織應用的 Vue.js 組件。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性。

（3）布局目錄 layouts

用於組織應用的布局組件。

（4）頁面目錄 pages

用於組織應用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件並自動生成對應的路由配置。

（5）插件目錄 plugins

用於組織那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。

（6）nuxt.config.js 文件

nuxt.config.js 文件用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。

 4.nuxt項目插件使用步驟

4.1安裝插件

npm install vue-awesome-swiper

4.2配置插件

在 plugins 文件夾下新建文件 nuxt-swiper-plugin.js，內容是

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

在 nuxt.config.js 文件中配置插件

將 plugins 和 css節點 復制到 module.exports節點下

module.exports = {
  // some nuxt config...
  plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],
  css: [
    'swiper/dist/css/swiper.css'
  ]
}

5.頁面布局

5.1復制靜態資源

將靜態原型中的css、img、js、photo目錄拷貝至assets目錄下 

將favicon.ico復制到static目錄下

5.2頁面布局

我們可以把頁頭和頁尾提取出來，形成布局頁

修改layouts目錄下default.vue，從靜態頁面中復制首頁，修改了原始文件中的資源路徑為~/assets/，將主內容區域的內容替換成<nuxt />

內容如下：

<template>
  <div>
    <!-- 頁頭部分 -->
      
    <!-- 內容的區域 -->
    <nuxt/>
      
    <!-- 頁尾部分 -->
  </div>
</template>

5.3定義首頁面

修改pages/index.vue：

修改了原始文件中的資源路徑為~/assets/

6.路由

6.1固定路由

路徑是固定地址不發生變化

使用router-link構建路由，通過to屬性設置路由跳轉地址，用法：在pages里面創建文件夾course，在course文件夾創建index.vue

<router-link to="/course" tag="li" active-class="current">
    <a>課程</a>
</router-link>

6.2動態路由

每次生成路由地址不一樣，比如查看詳情，一般會在路徑上傳一個id

（1）創建方式：

如果我們需要通過id查詢一條記錄，就需要使用動態路由，NUXT的動態路由是以下划線開頭的vue文件，參數名是為下划線后面的文件名

在pages下的course目錄下創建 _id.vue 

<template>
  <div>
    詳情列表
  </div>
</template>

 7.使用外部插件

7.1 安裝插件

這里以使用element-ui為例

首先使用命令下載依賴

npm install element-ui

7.2 配置插件

然后在項目根目錄下創建一個文件夾plugins，新建一個文件 nuxt-swiper-plugin.js ，然后在該js文件配置編寫如下內容

import Vue from 'vue'
import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后在nuxt.config.js文件下加入如下內容：

  plugins: [
        { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
      ],

8.封裝axios

8.1 安裝axios

npm install axios

8.2 配置

新建一個utils文件夾，新建一個request.js文件

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 創建axios實例
const service = axios.create({
    baseURL: 'http://localhost',
    timeout: 15000 // 請求超時時間
})
// http request 攔截器
service.interceptors.request.use(
    config => {
    // token 先不處理，后續使用時在完善
    return config
},
  err => {
    return Promise.reject(err)
})
// http response 攔截器
service.interceptors.response.use(
    response => {
        if (response.data.code !== 200) {
            Message({
                message: response.data.message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(response.data)
        } else {
            return response.data
        }
    },
    error => {
        return Promise.reject(error.response)
})
export default service