伺服器端渲染-解決nuxt.js的配置與使用

HTML頁面的内容可以由浏覽器本地渲染，也可以在伺服器端渲染。

浏覽器端的渲染，很難讓爬蟲擷取到内容（也就是搜尋引擎不能抓取到内容），是以不利于網站的推廣。

而伺服器端的渲染方式分兩種，一種是全部渲染和部分渲染。

全部渲染主要是由伺服器端向浏覽器傳回一個完整的HTML頁面，這也是我們常用的，雖然他響應的時間可能會比部分渲染長一些，但是綜合利弊，還是使用的多一些。

另一種就是部分渲染，主要通過AJAX來實作。

我們将VUE轉變為伺服器端渲染（SSR）的好處：

1.更好的SEO，因為搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面

2.用時更快，尤其是對于緩慢的網絡情況或者運作緩慢的裝置，無需等待是以javascript完全下載下傳并執行。

接下來就是主角Nuxt.js了

它是一個基于vue.js的通用應用架構，由node.js複制内容渲染。

Nuxt.js包含了vue.js、Vue-Router和Webpack。也就是在單工程檔案中我們寫好vue檔案要手動配置路由，但是在nuxt.js中會自動生成通路路勁，無需手動配置。

nuxt.js作為背景渲染架構，很容易上手使用。

在windows下建立Nuxt.js工程

首先要安裝Vue-Cli插件

npm install -g vue-cli --registry=https://registry.npm.taobao.org
           

然後再需要建立工程的目錄下面執行如下的指令。

vue init nuxt/starter my_project
cd my_project
npm install
           

就建立了名為my_project的工程

将工程導入到webStorm中

執行下面的指令，運作開發模式

npm run dev
           

這裡的dev是指以開發者身份運作。

打開浏覽器通路http://localhost:3000将會看到nuxt.js的歡迎頁面！

具體配置vue環境對象的過程請參考：

windows：解決windows下搭建vue環境

mac：解決mac版 vue搭建環境

配置成功後nuxt.js的目錄結構：

1. 資源目錄(assets),放置不需要編譯的檔案,如 CSS、LESS、JS 等。
2. 元件目錄(components ),放置 Vue.js 的元件。
3. 布局目錄(ayouts),放置布局檔案,該檔案設定的内容和樣式将作用到 所有的頁面上面。
4. 中間件目錄(middleware ),放置中間件。中間件是頁面渲染之前調用 的函數。
5. 頁面目錄(pages),放置需要渲染的頁面。
6. 插件目錄(plugins),放置插件。
7. 靜态檔案目錄(static),存放靜态檔案,該目錄下的檔案自動被映射到 “/”之下。
8. Store目錄,存放狀态資訊。
9. nuxt.config.js 檔案,Nuxt.js 的配置檔案。建議将其中的 ESLint 注釋掉。因為文法要求太嚴格，比如雙引号和單引号都不能寫差，很難搞。
10. package.js 檔案,依賴檔案。
           

在pages 目錄下面建立 welcome.vue 頁面，編寫html内容和js内容

<template> 
    <div>
        <h1>HelloWorld</h1>
        <p>{{username}}</p> 
    </div>
</template>
<script>
    import "../assets/welcome.css"; export default {
    data:function () {
    return { username : "Scott" }
    } }
</script>
           

注意

<div>

不能省略,一定要有根标簽！！

通路 http://127.0.0.1:3000/welcome，就可以看到頁面，不用自己配置路由！！