Nuxt.js筆記

前置知識

SSR服務器渲染

Vue SSR（server side rendering）服務端渲染 和 Vue SPA（single page application）單頁應用

Vue SSR->將原本要放在瀏覽器執行建立的組件，放到服務端先建立好，而後生成對應的html
將他們直接發送到瀏覽器，最後將這些靜態標記激活爲客戶端徹底可交互的應用程序

SSR針對SPA的好處：

1）更好的SEO，因爲搜索引擎抓取工具能夠直接查看徹底渲染後的頁面

2）更快的到達時間(time-to-content)，特別是對網絡慢或者運行緩慢的設備

很差的地方：

1）開發條件所限。瀏覽器特定的代碼，只能在某些生命週期鉤子函數(lifecycle hook)中使用

2）涉及構建設置和部署的要求更多

3）更多的服務器端負載

 

Nuxt.js

Nuxt.js是使用 Webpack 和 Node.js 進行封裝的基於Vue的SSR框架

它能夠不須要本身搭建SSR程序，而是經過約定好的文件結構和API便可實現一個首屏渲染的Web應用

安裝

一、先安裝vue-cli（只需安裝一次，安裝過就不用裝了）

二、使用vue安裝nuxt

vue init nuxt/starter mynuxt(項目名)

而後cd mynuxt

三、使用npm install安裝依賴包

npm install

四、最後啓動服務

npm run dev

 

文件結構

assets：資源文件，放置須要通過 webpack 打包處理的資源文件，如 scss，圖片，字體等

component 組件，這裏存放在頁面中，能夠複用的組件

layouts 佈局，全部頁面都會加載在佈局頁面中的 <nuxt /> 標籤中

middleware 中間件，能夠在頁面中調用： middleware: 'middlewareName'

pages 頁面，用於生成對應路由，支持嵌套，支持動態路由

plugins 插件，SPA中用的各種第三方組件和一些node模塊均可以在這引入

static 靜態文件，放置不須要通過 webpack 打包的靜態資源。如一些 js, css 庫

store 狀態管理，內置了vuex，能夠直接返回數據模塊或返回一個自建vuex根對象

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

 

nuxt.config.js配置文件

對程序的擴展管理可大概分爲如下類：

/*
build：主要對應 Webpack 中的各配置項，能夠對默認的 Webpack 配置進行擴展，如這裏代碼
cache：主要對應內置的組件緩存模塊lru-cache的配置對象，有默認值，可選關閉
css：對應咱們在SPA隨處引用樣式文件的require語句
dev：用於自定義配置環境變量，對應以前webpack.config.js相關文件中的變量語句
env：同上息息相關
generate：對generate命令執行時的行爲作一些定製
head：對應vue-meta插件的全局配置，vue-meta用於VUE/SSR程序的文檔元信息的管理
loading：用於定製化Nuxt.js內置的進度條組件
performance：用於配置Node.js服務器性能上的配置
plugins：用於管理和應用對應plugins文件夾中的插件
rootdir：用於設置 Nuxt.js 應用的根目錄（這倆api有很大合併的意義）
srcdir：用於設置 Nuxt.js 應用的源碼目錄（這倆api有很大合併的意義）
router：用於對vue-router的擴展和定製，其中還包括了中間件的配置，但並不完美
transition：用於定製Nuxt.js內置的頁面切換過渡效果的默認屬性值
watchers：用於定製Nuxt.js內置的文件監聽模塊chokidar和 Webpack 的相關配置項
*/

 

配置IP和端口

在package.json裏面進行配置

   "config":{
        "nuxt":{
            "host":"127.0.0.1",
            "port":"2019"
        }
    }

配置好後，輸入npm run dev重啓下服務便可

 

路由

Nuxt.js 根據 pages 目錄結構去生成 vue-router 配置，也就是說 pages 目錄的結構直接影響路由結構

|-- pages
    |-- posts
        |-- index.vue
        |-- welcome.vue
    |-- about.vue
    |

會生成

routes: [
  {
    path: '/posts',
    component: '~pages/posts/index.vue'
  }, {
    path: '/posts/welcome',
    component: '~pages/posts/welcome.vue'
  }, {
    path: '/about',
    component: '~pages/about.vue'
  }, {
    path: '/',
    component: '~pages/index.vue'
  }
]

 

還能夠在文件名前加 _

|-- pages
    |-- _about.vue
    |-- index.vue

會生成

routes: [
  {
    path: '/',
    component: '~pages/index.vue'
  }
]

 

動態路由

在pages/news下創建_id.vue

如下劃線爲前綴的Vue文件就是動態路由，而後在文件裏邊有 $route.params.id來接收參數

<template>
    <div>
        <h3>new-content</h3>
        <p>newsId:{{$route.params.id}}</p>
        <ul>
            <li>Home</li>
        </ul>
    </div>
</template>

pages/news/index.vue

進入了新聞詳細頁，並在詳細頁中取得了傳遞過來的新聞ID

<template>
    <div>
        <h3>news page</h3>
        <p>newsID:{{$route.params.newsId}}</p>
        <ul>
            <li><a href="/">HOME</a></li>
            <li><a href="/news/123">new-1</a></li>
            <li><a href="/news/p">new-2</a></li>
        </ul>
    </div>
</template>

 

下面是動態參數校驗

export default {
    validate({params}){
        //params的id必須是一個數字
        return /^\d+$/.test(params.id);
    }
}

使用了validate方法，並把params傳遞進去，而後用正則進行了校驗，若是正則返回了true正常進入頁面，若是返回false進入404頁面

好比new-2傳的id不是數字

<template>
    <div>
        <h3>news page</h3>
        <p>newsID:{{$route.params.newsId}}</p>
        <ul>
            <li><a href="/">HOME</a></li>
            <li><a href="/news/123">new-1</a></li>
            <li><a href="/news/p">new-2</a></li>
        </ul>
    </div>
</template>

當點擊new-2的時候就會進入404頁面

 

默認模板和默認佈局

只要修改默認模板時候都須要npm run dev 重啓下服務

默認佈局主要針對於頁面的統一佈局使用。它在位置根目錄下的layouts/default.vue。須要注意的是在默認佈局裏不要加入頭部信息，只是關於<template>標籤下的內容統一訂製