直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用，頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html，這并不利于網(wǎng)站的 SEO，這時(shí)候就需要服務(wù)端渲染

2016 年 10 月 25 日，zeit.co 背后的團(tuán)隊(duì)對(duì)外發(fā)布了一個(gè) React 的服務(wù)端渲染應(yīng)用框架 Next.js

幾小時(shí)后，一個(gè)基于 Vue.js 的服務(wù)端渲染應(yīng)用框架應(yīng)運(yùn)而生，與 Next.js 異曲同工，這就是Nuxt.js

一、快速模板

在已經(jīng)安裝了 vue-cli 的前提下，可以快速創(chuàng)建一個(gè) nuxt 的項(xiàng)目模板

vue init nuxt-community/starter-template MyProject

其中 MyProject 是項(xiàng)目文件夾名稱，可自定義

通過(guò) npm install （似乎用 yarn install 更順利） 安裝依賴之后，可以直接 npm run dev 在 開發(fā)環(huán)境 啟動(dòng)項(xiàng)目

默認(rèn)啟動(dòng)的地址為 http://localhost:3000/，可以在 package.json 中添加以下配置來(lái)修改主機(jī)端口號(hào)

 "config": {
  "nuxt": {
   "host": "0.0.0.0",
   "port": "7788"
  }
 },

開發(fā)完成后執(zhí)行 npm run build 打包代碼，最后 npm start 啟動(dòng)服務(wù)

二、重要目錄

生成的 項(xiàng)目目錄 如下

大部分文件夾名稱 都是 nuxt 默認(rèn)保留的，不可修改

其中比價(jià)比較關(guān)鍵的目錄有三個(gè)：

1. components 組件目錄

一般用來(lái)存放 非頁(yè)面級(jí)別 的組件，如 header、footer 等公共組件

該目錄下的組件具有常規(guī) vue 組件的方法和特性，不會(huì)被 nuxt.js 擴(kuò)展特性

2. layouts 布局目錄

可以修改該目錄下的 default.vue 來(lái)修改默認(rèn)布局

<template>
 <div>
  <my-header></my-header>
  <nuxt/>
  <my-footer></my-footer>
 </div>
</template>

其中 <nuxt/> 是必需的，頁(yè)面的主體內(nèi)容會(huì)顯示在這里 （類似于根節(jié)點(diǎn)的 <router-view/>）

此外還可以在目錄下新增 error.vue 作為錯(cuò)誤頁(yè)面，具體的寫法可以參考官方文檔

3. pages 頁(yè)面目錄

用于存放頁(yè)面級(jí)別的組件，nuxt 會(huì)根據(jù)該目錄下的頁(yè)面結(jié)構(gòu)生成路由

比如上圖中的頁(yè)面結(jié)構(gòu)，會(huì)生成這樣的路由配置：

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'about',
   path: '/about',
   component: 'pages/about.vue'
  },
  {
   name: 'classroom',
   path: '/classroom',
   component: 'pages/classroom.vue',
   children: [
    {
     path: 'student',
     component: 'pages/classroom/student.vue',
     name: 'student'
    },
    { //定義帶參數(shù)的動(dòng)態(tài)路由，需要?jiǎng)?chuàng)建對(duì)應(yīng)的以下劃線作為前綴的 Vue 文件或目錄
     path: ':id',
     component: 'pages/classroom/_id.vue',
     name: 'classroom-id'
    }
   ]
  }
 ]
}

此外，該目錄下的 vue 組件還具備一些 Nuxt.js 提供的特殊功能特性

其中 asyncData 方法比較常用，支持異步數(shù)據(jù)處理

這個(gè)方法會(huì)在 頁(yè)面組件 每次加載之前被調(diào)用，然后獲取數(shù)據(jù)并返回給當(dāng)前組件

asyncData ({ params, error }) {
  return axios.get(`api/posts/${params.id}`)
  .then((res) => {
   return { name: res.data.name}
  })
  .catch((e) => {
   error({ statusCode: 404, message: 'not found' })
  })
 }

asyncData 方法的第一個(gè)參數(shù)為上下文對(duì)象 context，具體屬性可以 查看這里

由于asyncData方法是在組件初始化前被調(diào)用的，所以在方法內(nèi)是沒(méi)有辦法通過(guò) this 來(lái)引用組件的實(shí)例對(duì)象

三、使用插件

如果項(xiàng)目中還需要引入其他的第三方插件，可以直接在頁(yè)面中引入，這樣在打包的時(shí)候，會(huì)將插件打包到頁(yè)面對(duì)應(yīng)的 js 里面

但要是別的頁(yè)面也引入了同樣的插件，就會(huì)重復(fù)打包。如果沒(méi)有需要分頁(yè)打包的需求，這時(shí)候可以配置 plugins

以 element-ui 為例，在安裝了 element-ui 之后，在 plugins 目錄下創(chuàng)建 elementUI.js

然后在根目錄的 nuxt.config.js 中添加配置項(xiàng) build.vendor 和 plugins

 build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.js'},
 ]

這里的 plugins 屬性用來(lái)配置 vue.js 插件，也就是 可以用 Vue.user() 方法 的插件

默認(rèn)只需要 src 屬性，另外還可以配置 ssr: false，讓該文件只在客戶端被打包引入

如果是像 axios 這種第三方 （不能 use） 插件，只需要在 plugins 目錄下創(chuàng)建 axios.js

// axios.js

import Vue from 'vue'
import axios from 'axios'

const service = axios.create({
 baseURL: '/api'
})

Vue.prototype.$ajax = axios
export default service

然后在 build.vendor  中添加配置 （不需要配置 plugins）

build: {
 vendor: ['~/plugins/axios.js']
}

這樣在打包的時(shí)候，就會(huì)把 axios 打包到 vendor.js 中

四、Vuex 狀態(tài)樹

如果在 store 目錄下創(chuàng)建了 index.js，nuxt.js 會(huì)根據(jù)該目錄下的文件創(chuàng)建 Vuex 狀態(tài)樹

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';

Vue.use(Vuex)

const store = () => new Vuex.Store({
 state: {
  author: 'WiseWrong',
  info: ''
 },
 mutations: {
  setInfo (state, val) {
   state.info = val
  }
 },
 actions: {
  loadAboutMeInfo ({commit, state}) {
   return Axios.get(`/about`)
    .then(res => {
     console.log('ajax is success')
     console.log(res.data.info)
     commit('setInfo', res.data.info)
    })
    .catch(err => {
     console.log('error')
    })
  }
 }
})

export default store

Nuxt.js 內(nèi)置引用了 vuex 模塊，不需要額外安裝

上面的代碼中，我在 actions 中寫了一個(gè) loadAboutMeInfo() 方法，用來(lái)請(qǐng)求 /api/about 接口

然后在 about.vue 頁(yè)面中調(diào)用

// about.vue 

<template>
 <section class="container">
  <div>
   <img src="~/assets/about.png" alt="">
  </div>
  <h1>{{$store.state.info}}</h1>
 </section>
</template>

<script>
export default {
 fetch({ store }) {
  return store.dispatch('loadAboutMeInfo')
 },
 name: 'about',
 data () {
  return {}
 }
}
</script>

成果演示：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論