Nuxt.js的那些事兒（一）

背景介紹

在這段時間中瞭解到VueSSR框架(Nuxt.js)，本身體驗了一下，還挺不錯的，本身找了一個(知乎招聘)官網模仿了一下，在下面的內容，我將記錄本身基於express+nuxt.js+less+axios怎麼去開發，由於是本身的練手項目，不足的地方仍是不少，但願你們多多包涵，多多提建議改進，我已經將項目源碼放置在github☞

開始

搭建項目

最初仍是根據官網安裝create-nuxt-app,由於我是熟悉express,在選擇的時候我仍是採用的express

項目結構

這是個人項目結構我都有在裏面寫好 README.md註明是什麼?主要仍是要說幾個

-- components (組件文件,建議不要修更名稱)
-- layouts    (佈局文件默認是default.vue,不能修更名稱)
-- pages      (頁面文件,主要是用來生成路由,不能修更名稱)
-- plugins    (插件,建議不要修改)
-- server     (node服務端渲染)
-- static     (靜態文件)
-- store      (vuex,不能修更名稱)
-- middleware (中間件)
複製代碼

我會在下面的內容主要說着幾個文件的做用

文件做用

components

這個很好理解就是放組件的地方,熟悉vue的都知道，我這裏就不累贅了。

layouts

這個是頁面的佈局，在此以前你要須瞭解什麼是視圖【傳送門】 他的做用主要是相似於一個模板的最頂層,當你某些頁面須要同一個組件，在沒有使用layouts你可能須要用到的地方都引用你須要的組件或者是寫在父子路由，可是若是你使用layouts話，你只須要在

-- layouts
---- blog.vue
複製代碼

layouts > blog.vue文件引用你須要的組件，在你須要的頁面使用這個佈局

<template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
}
</script>
複製代碼

注意的地方的是你的佈局只能寫在最外層，什麼是最外層，學習路由你就知道了

pages

這個文件也是咱們開發vue中常見的頁面文件夾，可是不一樣的是由於nuxt.js是沒有路由文件的，他的路由文件是經過page夾的文件層級生成出來的,來個簡單的例子

-- pages
---- index.vue
---- test.vue
---- name
------ index.vue
------ age.vue
複製代碼

相似這樣的目錄結構生成出來的路由爲

/          指向的pages文件夾下面的index.vue文件
/test      指向的pages文件夾下面的test.vue文件
/name      指向的pages文件夾下面的index.vue文件
/name/age  指向的pages文件夾下面的age.vue文件
複製代碼

細心的你會發現index.vue這個文件命名其實的用處很大的，若是你是想訪問/name這個路由路徑有兩種辦法建立文件一種是

-- pages
---- name.vue
複製代碼

或者是

-- pages
---- name
------ index.vue
複製代碼

第二種他是能夠拓展你的路由路徑,在name文件夾下面的文件除了index.vue其餘都會編譯爲他的children

說明

若是你想作路由匹配，這塊也是能夠作到的。如404頁面

-- pages
---- _.vue
------ index.vue
複製代碼

或者是你路徑匹配才能進入頁面，你能夠這麼作

-- pages
---- order
------ index.vue
------ _status.vue
複製代碼

這樣你須要訪問/order/你須要的參數,你就能夠進入pages>order>_status.vue,若是你須要作驗證，能夠藉助validate這個函數進行驗證

validate({ params }) {
    // 必須是number類型
    return /^\d+$/.test(params.status)
  },
複製代碼

相似express /^\/order\/(\d+)$/，若是你想要知道更多的路由知識，你能夠去官網看路由

在layouts我說的最外層就是指的是pages文件夾下的第一級文件,只能在這一級引用layouts佈局，其餘的地方引用是沒有效果的。

plugins

主要是用於引用第三方插件，UI框架或者是本身的庫

例如，我先寫一些本身的工具方法

文件名
-- plugins
---- VRFCT.js
---- common.js

--------------------------------------------------------------------------

VRFCT.js
/**
 * 判斷數據類型
 * @param {檢查的值:Any} value 
 */
function getType(value) {
    var typer = Object.prototype.toString
    var typeStr = typer.call(value)
    typeStr = typeStr.replace(/.*\s(\w+)\]/g, '$1')
    return typeStr.toLowerCase()
}
const install = function(Vue) { //經過install方法掛載到Vue原型上去
    Vue.prototype._getType = getType;
}
export default install

--------------------------------------------------------------------------

common.js
import Vue from 'vue';
import VRFCT from './VRFCT';
Vue.use(VRFCT);
複製代碼

在nuxt.config.js文件中找到

plugins: [{ src: '~/plugins/common', ssr: true }],
複製代碼

這樣咱們就可使用全局使用this._getType來判斷類型了。 須要說明的是 ssr是屬性是是否服務端渲染，默認是客戶端渲染(false); 在2.4版本後採用的是mode:client|server,client:客戶端|server:服務端 若是你對於這個plugins感興趣的話能夠看一下我項目中寫的plugins或者移步到官網plugins

server

node服務,根據你本身想要的去寫邏輯，我主要是配置node代理，讀取靜態文件, 這是個人server>index.js文件 地址

static

就是咱們常見的靜態文件 咱們能夠經過node默認獲取static文件的內容

-- server
---- index.js

--------------------------------------------------------------------------

app.use(express.static('static'))
複製代碼

store

這個是vuex的文件目錄,他也是經過文件夾的層級去生成對應的vuex文件,若是你對於vuex還不怎麼了解的話,能夠推薦你看官網vuex或者我也寫了一篇文章vuex

-- store
---- index.js
---- sex.js
---- name
------ index.js
------ age.js
複製代碼

假如咱們在store>index.js寫

const state = () => ({
    counter: 0
});

const getters = {
    getCounter(state) {
        return state.counter;
    }
}

const mutations = {
    increment(state) {
        state.counter++
    }
}

const actions = {
    // 異步方法
    actionCounter(context) {
        // 異步改變對話框的狀態
        context.commit(increment)
    }
}


export default {
    state,
    getters,
    mutations,
    actions
}
這裏咱們不須要寫namespaced: true, //用於在全局引用此文件裏的方法時標識這一個的文件名，由於自己他就是經過文件名生成對應的vuex文件
複製代碼

想要調用store>index.js的 getters--getCounter方法

const state = () => ({
    counter: 0
});
const getters = {
    getCounter(state) {
        return state.counter;
    }
}
const mutations = {
    increment(state) {
        state.counter++
    }
}
const actions = {
    // 異步方法
    actionCounter(context) {
        // 異步改變對話框的狀態
        context.commit(increment)
    }
}
export default {
    state,
    getters,
    mutations,
    actions
}
複製代碼

咱們能夠在須要的頁面使用

import { mapGetters } from "vuex";
  computed: {
    // 獲取狀態倉庫的batch
    ...mapGetters({
      counter: "getCounter"
    })
  },
複製代碼

文件的結構說明

-- store
---- index.js
---- order.js
---- name
------ index.js
------ age.js
複製代碼

相似這樣的目錄咱們的調用getters就會有所不一樣

-- store
---- index.js
import { mapGetters } from "vuex";
  computed: {
    // 獲取狀態倉庫的batch
    ...mapGetters({
      counter: "定義的方法"
    })
  },
 -- store 
 ---- order.js
 import { mapGetters } from "vuex";
  computed: {
    // 獲取狀態倉庫的batch
    ...mapGetters('order',{
      counter: "定義的方法"
    })
  },
 -- store 
 ---- name
 ------ index.js
  import { mapGetters } from "vuex";
  computed: {
    // 獲取狀態倉庫的batch
    ...mapGetters('name',{
      counter: "定義的方法"
    })
  },
 -- store 
 ---- name
 ------ age.js
   import { mapGetters } from "vuex";
  computed: {
    // 獲取狀態倉庫的batch
    ...mapGetters('name/age',{
      counter: "定義的方法"
    })
  },
複製代碼

middleware

這裏是中間件,這裏你能夠經過中間件作一些驗證token操做

<template>
  <h1>Secret page</h1>
</template>

<script>
export default {
  middleware: 'authenticated'
}
</script>
複製代碼

-- middleware
---- authenticated.js

export default function ({ isServer, store, req }) {
  if (isServer && !req) return
  const loggedUser = isServer ? getUserFromCookie(req) : getUserFromLocalStorage()
  store.commit('SET_USER', loggedUser)
}
複製代碼

你能夠看到一些變量如req isServer store 這些是context(上下文內容)，關於它的知識，你能夠看官網詳細的內容

最後，感謝

在下篇文章，我會根據個人項目，作一個比較具體的簡介，但願你們多多支持，有問題的話能夠留言我！

請勿未經容許轉載，謝謝合做

聯繫我:652165177(QQ)