javascript
NuxtJS快速入门
服務(wù)器端渲染(SSR)
知識儲備
- ES6
- Nodejs
- Vue
- React
- Angular
什么是服務(wù)器端渲染
- 前端渲染：html頁面作為靜態(tài)文件存在，前端請求時(shí)后端不對該文件做任何內(nèi)容上的修改，直接以資源的方式返回給前端，前端拿到頁面后，根據(jù)寫在html頁面上的js代碼，對該html的內(nèi)容進(jìn)行修改。
- 服務(wù)端渲染：前端發(fā)出請求后，后端在將HTML頁面返回給前端之前，先把HTML頁面中的特定區(qū)域，用數(shù)據(jù)填充好，再將完整的HTML返回給前端。在SPA場景下，服務(wù)端渲染都是針對第一次get請求，它會完整的html給瀏覽器，瀏覽器直接渲染出首屏，用不著瀏覽器端多一個(gè)AJAX請求去獲取數(shù)據(jù)再渲染。
為什么使用服務(wù)器端渲染
優(yōu)點(diǎn)：
- 更好的 SEO，因?yàn)閭鹘y(tǒng)的搜索引擎只會從 HTML 中抓取數(shù)據(jù)，這會導(dǎo)致前端渲染的頁面無法被抓取。
- 更快的內(nèi)容到達(dá)時(shí)間(time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備 。頁面首屏?xí)r間大概有80%消耗在網(wǎng)絡(luò)上，剩下的時(shí)間在后端讀取數(shù)據(jù)以及瀏覽器渲染，顯然要優(yōu)化后面的20%是比較困難的，優(yōu)化網(wǎng)絡(luò)時(shí)間是效果最明顯的手段。傳統(tǒng)的Ajax請求是先請求js再由js發(fā)起數(shù)據(jù)請求，兩項(xiàng)時(shí)間再加上瀏覽器渲染時(shí)間才是首屏?xí)r間。而SSR能將兩個(gè)請求合并為一個(gè)。
缺點(diǎn)：
- 更多的服務(wù)器端負(fù)載。
- 服務(wù)器端和瀏覽器環(huán)境差異帶來的問題，例如document等對象找不到的問題。
如何選擇
建議：如果注重SEO的站點(diǎn)，非強(qiáng)交互的頁面，建議用SSR；像后臺管理頁面這類強(qiáng)交互的應(yīng)用，建議使用前端渲染。
1. Nuxt.js服務(wù)器端渲染
學(xué)習(xí)目標(biāo)
- 了解Nuxt.js的作用
- 掌握Nuxt.js中的路由
- 掌握layouts、pages以及components的區(qū)別
- 能夠在Nuxt.js項(xiàng)目中使用element-ui
- 掌握Nuxt.js中異步獲取數(shù)據(jù)的方式
- 完成小項(xiàng)目
- 掌握SEO的優(yōu)化
1.1 Nuxt.js入門
1.1.1 什么是Nuxt.js
Vue服務(wù)端渲染官網(wǎng)
Nuxt.js官網(wǎng)
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。
1.1.2 第一個(gè)Nuxt應(yīng)用程序
npm i create-nuxt-app -g create-nuxt-app my-nuxt-demo cd my-nuxt-demo npm run dev1.1.3 文件結(jié)構(gòu)分析
└─my-nuxt-demo├─.nuxt // Nuxt自動生成，臨時(shí)的用于編輯的文件，build├─assets // 用于組織未編譯的靜態(tài)資源如LESS、SASS或JavaScript,對于不需要通過 Webpack 處理的靜態(tài)資源文件，可以放置在 static 目錄中├─components // 用于自己編寫的Vue組件，比如日歷組件、分頁組件├─layouts // 布局目錄，用于組織應(yīng)用的布局組件，不可更改?├─middleware // 用于存放中間件├─node_modules├─pages // 用于組織應(yīng)用的路由及視圖,Nuxt.js根據(jù)該目錄結(jié)構(gòu)自動生成對應(yīng)的路由配置，文件名不可更改?├─plugins // 用于組織那些需要在 根vue.js應(yīng)用 實(shí)例化之前需要運(yùn)行的 Javascript 插件。├─static // 用于存放應(yīng)用的靜態(tài)文件，此類文件不會被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。 服務(wù)器啟動的時(shí)候，該目錄下的文件會映射至應(yīng)用的根路徑 / 下。文件夾名不可更改。?└─store // 用于組織應(yīng)用的Vuex 狀態(tài)管理。文件夾名不可更改。?├─.editorconfig // 開發(fā)工具格式配置├─.eslintrc.js // ESLint的配置文件，用于檢查代碼格式├─.gitignore // 配置git忽略文件├─nuxt.config.js // 用于組織Nuxt.js 應(yīng)用的個(gè)性化配置，以便覆蓋默認(rèn)配置。文件名不可更改。?├─package-lock.json // npm自動生成，用于幫助package的統(tǒng)一設(shè)置的，yarn也有相同的操作├─package.json // npm 包管理配置文件├─README.md1.2 頁面和路由
1.2.1 基本路由
Nuxt.js 依據(jù) pages 目錄結(jié)構(gòu)自動生成 vue-router 模塊的路由配置。
假設(shè) pages 的目錄結(jié)構(gòu)如下
└─pages├─index.vue└─user├─index.vue├─one.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'}] }1.2.2 頁面跳轉(zhuǎn)
1.2.3 動態(tài)路由
- 在 Nuxt.js 里面定義帶參數(shù)的動態(tài)路由，需要?jiǎng)?chuàng)建對應(yīng)的以下劃線作為前綴的 Vue 文件 或 目錄。
- 獲取動態(tài)參數(shù){{$route.params.id}}
1.2.4 路由參數(shù)校驗(yàn)
Nuxt.js 可以讓你在動態(tài)路由對應(yīng)的頁面組件中配置一個(gè)validate方法用于校驗(yàn)動態(tài)路由參數(shù)的有效性。該函數(shù)有一個(gè)布爾類型的返回值，如果返回true則表示校驗(yàn)通過，如果返回false則表示校驗(yàn)未通過。
validate(data) {cosole.log(data)return true }1.2.5 嵌套路由
1.3 layouts & pages & components
1.3.1 創(chuàng)建layout
1.3.2 創(chuàng)建特殊layout : error
layouts文件夾下面新建error.vue，error是關(guān)鍵字
1.3.3 新建一個(gè)組件
在components文件夾下面新建一個(gè)Header.vue組件
引入組件，注意路徑的~符號，表示根目錄
layout中也能使用組件
1.3.4 樣式配置
nuxt.config.js中設(shè)置全局css樣式的文件路徑
1.4 ElementUI使用
下載npm i element-ui -S
在plugins文件夾下面，創(chuàng)建ElementUI.js文件
import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI)在nuxt.config.js中添加配置
css: ['element-ui/lib/theme-chalk/index.css' ], plugins: [{src: '~/plugins/ElementUI', ssr: true } ], build: {vendor: ['element-ui'] }1.5 異步數(shù)據(jù)
Nuxt.js 擴(kuò)展了 Vue.js，增加了一個(gè)叫 asyncData 的方法，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)。asyncData方法會在組件(限于頁面組件)每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。所以需要注意這個(gè)函數(shù)中不能使用this
注意：常規(guī)寫法如果在created鉤子中寫異步，是在客戶端渲染的而不是在服務(wù)端
使用方法：asyncData(context, callback) {callback(null, data)}
context.route.params.xxx獲取參數(shù)
callback(new Error(), data)渲染出錯(cuò)的頁面
注意：這個(gè)方法在服務(wù)器端執(zhí)行和在客戶端執(zhí)行的區(qū)別
1.6 axios的使用
安裝npm install --save axios
使用
import axios from 'axios'asyncData(context, callback) {axios.get('http://localhost:3301/in_theaters').then(res => {console.log(res);callback(null, {list: res.data})}) }為防止重復(fù)打包，在nuxt.config.js中配置
module.exports = {build: {vendor: ['axios']} }nuxt中axios如何跨域獲取數(shù)據(jù)
- 參考文檔：https://axios.nuxtjs.org/
- 參考文檔：https://github.com/nuxt-community/proxy-module
- ajax 跨域問題
- 首先推薦：CORS 處理跨域，只需要服務(wù)端做一些配置就好了，客戶端可以直接使用
- 其次：配置服務(wù)端(任何Web服務(wù)器)代理
- Apache
- nginx
- tomcat
- Node
- webpack 中的 webpack-dev-server
- nuxt 中使用 axios 發(fā)請求
- 配置 nuxt
- nuxt 提供了一個(gè)模塊 @nuxtjs/axios
- 這個(gè)模塊內(nèi)置了 Node 的一個(gè) http-proxy-middleware 中間件
1.7 小案例(豆瓣電影列表)
接口：
http://api.douban.com/v2/movie/top250
http://api.douban.com/v2/movie/top250?start=0&count=100
獲取電影列表：http://localhost:3301/in_theaters (in_theaters可以替換為coming_soon及top250)
獲取電影詳情：http://localhost:3301/in_theaters/1?_embed=details
http://localhost:3301/in_theatershttp://localhost:3301/coming_soonhttp://localhost:3301/top250http://localhost:3301/details
1.7.1 豆瓣電影首頁創(chuàng)建
1.7.2 豆瓣電影列表頁面創(chuàng)建
1.7.3 電影詳情頁面
1.8 SEO優(yōu)化
1.8.1 全局
在nuxt.config.js配置文件中修改
head: {title: pkg.name,meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: pkg.description }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] },1.8.2 局部
head(){return{title:'豆瓣電影',meta:[{'name':'keywords','content': '電影、經(jīng)典電影、熱映、電視劇、美劇、影評、電影院、電影票、排行、推薦'}]} }總結(jié)
以上是生活随笔為你收集整理的NuxtJS快速入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux搭建乐网服务器,教你linux
- 下一篇： decimal.JS 快速入门