SSR項目Nuxt使用

什麼是服務端器端渲染（SSR）？

Vue.js是構建服務器端應用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上完全可交互的應用程序。

服務器渲染的 Vue.js 應用程序也可以被認爲是"同構"或"通用"，因爲應用程序的大部分代碼都可以在服務器和客戶端上運行。

使用服務器端渲染（SSR）優勢

更好的SEO，由於搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
更快的內容到達時間，特別是對於緩慢的網絡情況或運行緩慢的設備。
基本用法

安裝
切換至存放項目的路徑，如E盤：

cd E:

使用官網提供的腳手架工具
create-nuxt-app

npx create-nuxt-app 項目名稱

下載完成後可以看到下面的提示框，輸入項目名稱：




接下來的提示中統一回車選擇默認即可。
啓動

$ cd 項目名稱
$ npm run dev

注意：
運行項目可能會遇到以下錯誤提示HTMLElement is not define nuxt.js,原因是在Nuxtjs的服務器環境加載Element-ui遇到兼容問題拋出的錯誤，解決方法：
下載指定版本的element-ui
npm install --save [email protected]

文件結構

• xianyun 項目根目錄
  - assets 資源目錄
  - components 組件目錄
  - layouts 佈局組件目錄
  - middleware 中間件目錄
  - pages 頁面目錄
  - plugins 插件目錄
  - static 靜態文件目錄
  - Store Vuex 狀態樹 文件
  - nuxt.config.js Nuxt.js 應用的個性化配置
  - package.json 依賴關係和對外暴露的腳本接口

基本配置
1、修改/刪除默認文件
Nuxtjs初始化項目時給我們提供兩個演示文件，對我們接下來的項目開發沒有任何作用，分別是pages/index.vue和components/logo.vue
修改如下：
首先是pages/index.vue

<template>
    <div>
        首頁
    </div>
</template>
<script>
export default {

}
</script>
<style>
</style>

刪除component/logo.vue文件
2、創建頁面目錄

• … // 其他文件
• pages
  - index.vue // 已存在的首頁文件
  - post // 存放旅遊攻略模塊的文件夾
  - - index.vue // 旅遊攻略模塊首頁文件
  - air // 存放機票模塊的文件夾
  - - index.vue // 機票模塊首頁文件
  - hotel // 存放酒店模塊的文件夾
  - - index.vue // 機票模塊首頁文件
  - user // 存放用戶模塊的文件夾
  - - login.vue // 用戶登錄註冊頁面

3、創建組件目錄
在components文件夾中新建文件夾：

• … // 其他文件
• components // 存放公共組件的文件夾
  - post // 存放旅遊攻略模塊組件的文件夾
  - air // 存放機票模塊組件的文件夾
  - hotel // 存放酒店模塊組件的文件夾
  - user // 存放用戶模塊組件的文件夾
• … // 其他文件

4、修改配置
（1）、頁面過渡效果樣式
在assets/目錄下創建這個文件assets/main.css，添加以下樣式：

/* 頁面切換時候過渡樣式 */
.page-enter-active, .page-leave-active {
    transition: opacity .5s;
}

/* 打開時候過渡樣式 */
.page-enter, .page-leave-active {
    opacity: 0;
}

/* 頁面頂部頁面加載進度條 */
.nuxt-progress{
    background:#409eff;
    height: 1px;
}

只是新建了樣式文件還不能產生效果，需要在nuxt.config.js配置文件中加載該文件才能生效。
參考文檔：
https://zh.nuxtjs.org/guide/routing#過渡動效

5、修改配置文件
配置文件nuxt.config.js對項目進行了全局配置，對每個頁面都生效。
複製下面配置替換項目的nuxt.config.js文件，如果想手動修改的話可以查看中文註釋行(#10 #18 #32 #56)

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: "閒雲旅遊網", // 修改title
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字體樣式
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' // 新增自定義的頁面過渡樣式（文件來自3.4.1）
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // https://axios.nuxtjs.org/setup
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    // baseURL: "http://157.122.54.189:9095" // 新增備用地址
    baseURL: "http://127.0.0.1:1337" // 新增axios默認請求路徑 		  
  },

  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  },
}

6、添加less
預編譯樣式選擇less，相關配置nuxtjs已經配置好了，不需要改動webpack的配置文件，只需要安裝依賴包即可

npm install --save less less-loader

Nuxt和普通的Vue

1. Nuxt是同構程序，這裏的同構指的是一套代碼，可以在瀏覽器運行，也可以在服務器（Nodejs）運行，也就是說可以同時使用瀏覽器的API和Nodejs的API。
2. 普通的Vue的頁面只能使用瀏覽器的API，即使在Nodejs環境下開發也只是使用webpack來編譯打包。
3. Nuxt是前後端框架的集合，前端採用Vue，後端可選框架有Express、hapi等，所有可以理解爲Vue是一個頁面模板的存在，類似於art-template。
4. Nuxt支持單頁和多頁應用。