好程式設計師web前端培訓學習筆記Vue學習筆記之二

　　好程式設計師 web 前端培訓 學習筆記Vue 學習筆記 之二， 服務端渲染

　　 什麼是伺服器端渲染 (SSR) ？

　　 Vue.js   是構建客戶端應用程式的框架。預設情況下，可以在瀏覽器中輸出 Vue 元件，進行生成 DOM 和操作 DOM 。然而，也可以將同一個元件渲染為伺服器端的 HTML 字串，將它們直接傳送到瀏覽器，最後將這些靜態標記 " 啟用 " 為客戶端上完全可互動的應用程式。

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

為什麼使用伺服器端渲染 (SSR)？

·  更好的 SEO ，由於搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。

·  更快的內容到達時間 (time-to-content) ，特別是對於緩慢的網路情況或執行緩慢的裝置。

Vue SSR初體驗

00001.  安裝

npm   install   vue   vue - server - renderer   -- save

00001.  渲染一個 Vue 例項

// 第 1 步：建立一個 Vue 例項 const   Vue   =   require( 'vue' ) const   app   =   new   Vue({

   template :   `<div>Hello World</div>` }) // 第 2 步：建立一個 renderer const   renderer   =   require( 'vue-server-renderer' ).createRenderer() // 第 3 步：將 Vue 例項渲染為 HTML renderer.renderToString(app).then(html   =>   {

   console.log(html)}). catch (err   =>   {

   console.error(err)})

 

Nuxt.js

1.Nuxt.js介紹與安裝

https:// zh.nuxtjs.org/guide

npx create-nuxt-app < 專案名 >

服務端渲染， 解決首屏載入速度， 和 seo 問題

//如果出現錯誤  HTMLElement is not define 修改nuxt.config.js   中pluginsplugins :   [

     // '@/plugins/element-ui',      {   src :   '@/plugins/element-ui' ,   ssr :   false }

     ]

     //不要複製 ， 編碼有問題

 

2. Nuxt.js的配置

https:// zh.nuxtjs.org/guide/con figuration

3. 路由

Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模組的路由配置。

(1) 要在頁面之間使用路由，我們建議使用 <nuxt-link> 標籤。 支援 activeClass ,tag

(2)

pages /--|   user /-----|   index.vue -----|   one.vue --|   index.vue 那麼 ， Nuxt.js   自動生成的路由配置如下 ： router :   {

   routes :   [

     {

       name :   'index' ,

       path :   '/' ,

       component :   'pages/index.vue'

     },

     {

       name :   'user' ,

       path :   '/user' ,

       component :   'pages/user/index.vue'

     },

     {

       name :   'user-one' ,

       path :   '/user/one' ,

       component :   'pages/user/one.vue'

     }

   ]}

 

(3) 巢狀路由

建立內嵌子路由，你需要新增一個 Vue 檔案，同時新增一個與該檔案同名的目錄用來存放子檢視元件。

Warning: 別忘了在父元件 (.vue 檔案 ) 內增加 <nuxt-child/> 用於顯示子檢視內容。

pages /--|   film /-----|   nowplaying.vue -----|   comingsoon.vue --|   film.vue

 

（4 ）重定向

a.  nuxt.config.js

    router:{

        extendRoutes (routes, resolve) {

          routes.push({

            path: '/',

            redirect: '/film'

          })

        }

    }

 

b. 利用中介軟體來處理

    // 中介軟體 middle/ redirect.js

    export default function({ isHMR, app, store, route, params, error, redirect }) {

      if (isHMR) return

      // 頁面均放在_lang資料夾下，即lang為動態路由引數

      /*if (!params.lang) {  //此寫法會出現路由重定向次數過多的問題

        return redirect('/' + defaultLocale + '' + route.fullPath)

      }

    */

        if(route.fullPath == '/film') {

          return redirect('/film/nowplaying')

        }

    }

    router: {

        middleware: 'redirect'  // 即每次路由跳轉會呼叫該中介軟體

       //多箇中介軟體寫法

       // middleware: ['redirect']

    }

（5 ） 動態路由

必須加下劃線 ( 資料夾也可以加下劃線 ( 多級巢狀 ) ， 檔案也可以加下劃線 )

pages /--|   detail /-----|   _id.vue //程式設計式跳轉  this.$router.push("/detail");  

 

（6 ） 獲取動態路由引數

  asyncData({params}){

     console.log(params.id);

   }

 

4. 檢視

在layout 裡面 寫好 default.vue 可以認為這是根元件的模板了，

所有的元件都加在裡面， 但是有些頁面 可能不一樣，就可以使用 個性化定製頁面。

舉個例子 layouts/template.vue:

< template >

   < div >

     < div > 這個頁面不需要導航欄 < /div>

     < nuxt />

   < /div> < /template> 在   pages / detail.vue   裡 ，   可以指定頁面元件使用   template   佈局 。 < script >export   default   {

   layout :   'template' } < /script>

 

5. 非同步資料與資原始檔

(1) 如果元件的資料不需要非同步獲取或處理，可以直接返回指定的字面物件作為元件的資料。

export   default   {

   data   ()   {

     return   {   foo :   'bar'   }

   }}

 

(2) 使用 req/res(request/response) 物件

在伺服器端呼叫asyncData時 ， 您可以訪問使用者請求的req和res物件 。 在當前頁面重新整理 ，   服務端執行此函式從其他頁面跳轉過來 ， 客戶端執行此函式 export   default   {

   async   asyncData   ({   req,   res   })   {

     // 請檢查您是否在伺服器端      // 使用 req 和 res      if   (process.server)   {   //判斷是否在伺服器被呼叫          //process.client 判斷是否在客戶端被呼叫       return   {   host :   req.headers.host   }

     }

     return   {}

   }}

 

(3) 錯誤處理

Nuxt.js 在上下文物件 context 中提供了一個 error(params) 方法，

你可以透過呼叫該方法來顯示錯誤資訊頁面。params.statusCode 可用於指定服務端返回的請求狀態碼。

以返回 Promise 的方式舉個例子：

export   default   {

   asyncData   ({   params,   error   })   {

     return   axios.get( `{ params.id }` )

     .then((res)   =>   {

       return   {   title :   res.data.title   }

     })

     . catch ((e)   =>   {

       error({   statusCode :   404 ,   message :   'Post not found'   })

     })

   }}

 

(4) 反向代理的配置 （重啟伺服器）

npm   i   @ nuxtjs / proxy   - D在   nuxt.config.js   配置檔案中新增對應的模組 ， 並設定代理

   modules :   [

     '@nuxtjs/axios' ,    //新增axios      '@nuxtjs/proxy'     //新增proxy模組    ],

   axios :   {

     proxy :   true

   },

   proxy :   {

     '/api' :   {

       target :   ' ,

       pathRewrite :   {

         '^/api'   :   '/'

       }

     }

   } 這樣就配置好了webpack的反向代理 。 為了在服務端和客戶端都工作 ，    需要 axios.get((process.server ? ' : '' ) + "/restapi/shop......e&terminal=h5" ).then(res=>{

       console.log(res.data)}) 如果上線了 ，   需要在node中配置好   http - proxy - middleware   就工作了 。

 

6. vuex狀態樹 ( 注意：重啟伺服器 )

（1 ）需要新增 store/index.js 檔案，並對外暴露一個 Vuex.Store 新的例項

每次訪問都要返回一個例項， 防止交叉請求狀態汙染

import   Vue   from   'vue' import   Vuex   from   'vuex' Vue.use(Vuex) const   store   =   ()   =>   new   Vuex.Store({

   state :   {

     counter :   0

   },

   mutations :   {

     increment   (state)   {

       state.counter ++

     }

   }})

（2 ） fetch 方法用於在渲染頁面前填充應用的狀態樹（ store ）資料，

與 asyncData 方法類似，不同的是它不會設定元件的資料。

如果頁面元件設定了 fetch 方法，它會在元件每次載入前被呼叫（在服務端或切換至目標路由之

前）。

export   default   {

   async   fetch   ({   store,   params   })   {

     let   {   data   }   =   await   axios.get( ' )

     store.commit( 'setStars' ,   data)

   }} //當然這個非同步請求 也可以在actions中做非同步 < script >export   default   {

   async   fetch   ({   store,   params   })   {

     await   store.dispatch( 'GET_STARS' );

   }} < /script> //store/index.js export   const   actions   =   {

   async   GET_STARS   ({   commit   })   {

     const   {   data   }   =   await   axios.get( ' )

     commit( 'SET_STARS' ,   data)

   }}

（3 ） vuex 還是非父子以及狀態快照的作用

// 訪問 還是 透過 this.$store.state.list async   fetch({store}){

     if (store.state.list.length){

         return ;

     }

     //資料請求部分   }