Nuxt.js使用詳解

首先來說一下服務端渲染

 

直白的說就是在服務端拿數據進行解析渲染，直接生成html片斷返回給前端。具體用法也有不少種好比：

傳統的服務端模板引擎渲染整個頁面

服務渲染生成htmll代碼塊, 前端 AJAX 獲取而後js動態添加

 

服務端渲染的優劣

 

首先是seo問題，前端動態渲染的內容是不能被抓取到的，而使用服務端渲染就能夠解決這個問題。還有就是首屏加載過慢這種問題，好比在SPA中，打開首頁須要初始加載不少資源，這時考慮在首屏使用服務端渲染，也是一種折中的優化方案。可是使用SSR時，勢必會增長服務器的壓力，還有可能會須要先後端同構，使用一樣的模板引擎，這彷佛與先後端分離的觀點又是矛盾的。廢話就說到這裏，下面來看一下vue框架中的服務器渲染。

 

安裝官網有詳細介紹

 

https://zh.nuxtjs.org/

 官網安裝很是方便，可是會有點問題：

　　選擇模式的時候，ssr 主要就是作 seo 因此不要選單頁模式。

一、安裝的時候會有一個問題：

 

安裝的時候，出現的fsevents咱們是要注意的，這個的意思是要更新,執行

npm install --update-binary

二、寫法問題。

　　node 是不支持 import 模式的，這種安裝方式項目也是同樣不支持 import 模式的，改法：package.json 

咱們執行 dev 的時候其實就是執行的 上圖的 dev，意思是：用nodemon 去執行 server/index 咱們知道node是不支持import的，爲了讓支持咱們要使用 babel

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate"
  },

而後安裝 相應的babel

npm install babel-preset-es2015

建立babel 配置文件，項目根目錄下

touch .babelrc

改成

{
    "presets": ["es2015"]
}

這個時候啓動就行了，也能使用 import 了

三、安裝sass、less等第三方leader

 npm i sass-loader node-sass

vue中

<style lang="scss">

 

 

Nuxt.js工做流

 

 

Nuxt.js基礎

 

Nuxt.js配置文件

　　項目目錄下的：nuxt.config.js

　　header：顧名思義就是頭部信息,title修改就是 文章頭部

　　css：項目默認加載的css，例如com.css。

  css: [
    'element-ui/lib/theme-chalk/index.css',
    '~assets/css/com.css'
  ],

 reset.css須要咱們手動引入

'element-ui/lib/theme-chalk/reset.css',

 

1、nuxt路由

　　官網對於項目的目錄結構有詳細介紹能夠看看。

　　對於路由：項目下的pages 文件夾就是路由，默認的是pages 下邊的 index 文件也就是 / 。須要新的路由就創建新的 vue 文件就行，若是是文件夾=>.vue文件，那麼路由前邊就加一個文件夾名。

2、nuxt頁面模板。

　　項目目錄下邊會有是那個文件，分別是：pages、components、layouts三個文件夾，這三個文件夾有什麼區別呢？

　　components：　　這裏是真正的組件的地方

　　pages:  　　　　　路由的頁面。須要模板

　　layoutss：　　　　模板頁面。

　　分析：例如電商網站，首頁、列表頁、詳情頁、登陸、註冊。前三個頁面的頭部底部同樣只是中間數據不同，而登陸註冊的頭部同樣，底部是5個公用。那麼就至關於有兩個膜版頁面。頭部、底部能夠當成組件放在 components 裏面。模板頁面用登陸作例子:

　　layouts文件夾下，創建 login.vue 的模板頁面

　　

　　components 下邊創建 頭部 底部組件。

　　pages添加 login.vue  文件：也就是login 這個頁面以及路由。layouts 裏面的 Nuxt 邊會在訪問的時候加載 這個 vue頁面

　　

　　這樣 路由 模板 就結束了。

 3、nuxt路由

　　vue項目之前數據處理是在，mounted 裏面請求ajax，而後在進行處理渲染到頁面上，在這裏就變化了。用 asyncData 去處理數據

　　

<template>
    <section class="container">
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item.name}}</li>
        </ul>
    </section>
</template>
<script>
import axios from 'axios';
export default {
    // 這裏必定要將加載的模板在這裏表示出來，否擇就是默認的模板
    layout: 'login',
    data() {
        return{
            list: []
        }
    },
    async asyncData() {
        let {status, data: {list}} = await axios.get('url');
        if(status == 0){
            return {
                list
            }
            // 這樣就將數據拿回來的list 賦值給了 data 裏面的 list 在頁面中就能夠渲染了。而且這樣渲染的數據查看源碼的時候頁面上是有數據的。
        }else{
            alert("數據請求錯誤");
        }
        console.log(result)
    }
}

</script>
<style>

</style>

上邊說了還有一個fetch 的數據處理方法，這個是處理 vuex 的數據的。

asyncData其實就是 ssr。什麼叫ssr，其實就是解決seo的問題的和快速展示，由於vue的渲染不是快速的，ssr是直接渲染html的。

 

  4、nuxt的vuex

 

　　官網其實對vuex的講解很詳細。能夠看官網，兩種方式按照喜愛寫。

　　一、普通方式。

　　

　　index 是配置頁面。modules 下邊是兩個 vuex 文件。

　　city.js

　　

　　index.js

　　

 

　　頁面中拿到 city.js 下邊的數據：

　　

$store.state.city.list

actions 上邊沒寫，由於：在英文官網中搜init會出現

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}

什麼意思呢？工做流的第二步驟，任何一個請求進來都會到這個裏面，這塊的作法就是不浪費多餘的請求，例如：用戶信息請求了一次就不在浪費屢次請求，例如判斷登陸狀態