使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用的案例

這篇文章將為大家詳細(xì)講解有關(guān)使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用的案例，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

安裝 nuxt.js

Nuxt.js 官方提功了兩種方法來(lái)進(jìn)行項(xiàng)目的初始化，一種是使用Nuxt.js團(tuán)隊(duì)的腳手架工具 create-nuxt-app ，一種是根據(jù)自己的需求自由配置

使用腳手架適合新手，對(duì) nodejs 后臺(tái)框架有所了解；按照自己需求自由配置，需要對(duì)如何配置 webpack 以及 nodejs 后臺(tái)框架有所了解。

兩種方式比較下就是原生和插件的區(qū)別。

使用腳手架安裝

需要有 nodejs 或者yarn 環(huán)境，推薦使用 vscode 自帶的控制臺(tái)輸入命令行命令進(jìn)行操作

在有了環(huán)境之后直接輸入以下命令就可以直接創(chuàng)建一個(gè)項(xiàng)目（npx 在npm 5.2.0默認(rèn)安裝，使用最新穩(wěn)定nodejs環(huán)境不用考慮有沒(méi)有）

npx create-nuxt-app <項(xiàng)目名>

#或者用yarn

yarn create nuxt-app <項(xiàng)目名>

之后他會(huì)提示你進(jìn)行一些選擇

1.項(xiàng)目名

在這里可以設(shè)置項(xiàng)目名，亦可以之后在 package.js 中設(shè)置 name 屬性，一般是在輸入上面命令時(shí)的項(xiàng)目名，不需要修改直接回車就好

2.項(xiàng)目描述

這里是關(guān)于項(xiàng)目的描述，比如是做什么的，也可以之后在 package.js 中設(shè)置 description 屬性

3.選擇服務(wù)器端框架

看自己習(xí)慣使用什么了，一般 Express Koa 居多

4.擴(kuò)展插件

選擇 axios EsLint Prettier

• axios 發(fā)送HTTP請(qǐng)求

• EsLint 在保存時(shí)代碼規(guī)范和錯(cuò)誤檢查自己的代碼。

• Prettier 在保存時(shí)格式化/美化自己的代碼。
  

5.選擇 UI 框架

UI 框架方便快速開(kāi)發(fā)，提供了很多現(xiàn)成的樣式，近幾年聽(tīng)到最多的就是 Element UI

6.選擇測(cè)試框架

測(cè)試框架是用來(lái)檢測(cè)程序有沒(méi)有到達(dá)預(yù)期的目的，有沒(méi)有出錯(cuò)，這里暫時(shí)用不到，所以選擇 none 就好

7.選擇渲染模式

這里分單頁(yè)應(yīng)用（spa）以及普遍的方式（Universal），單頁(yè)應(yīng)用有很多路由但是頁(yè)面只有一個(gè)，所有能看到的頁(yè)面都是 js 即時(shí)生成的 dom，第二種是在服務(wù)器生成 html ，有多少路由就有多少頁(yè)面。

使用 nuxt 就是為了解決 SEO 的問(wèn)題，使其實(shí)現(xiàn)所有網(wǎng)站路徑完全被收錄

8.作者

這個(gè)也可以之后在 package.js 中設(shè)置 author 屬性

9.選擇包管理工具

這里選擇那個(gè)都可以，看自己習(xí)慣用哪個(gè)

10.選擇完成開(kāi)始安裝

11.安裝完成

提示信息

項(xiàng)目目錄

關(guān)于如何根據(jù)自己的需求自由配置，這里不講，有需要自由配置的一般都不是新手了，推薦看看官方文檔

添加其他常用功能

除了 nuxt 腳手架自帶的，我們還需要其他配置，ES6的編譯 ，CSS的預(yù)處理，其他的用到了再添加

安裝 babel

yarn add babel-cli babel-preset-env

配置文件

.babelrc

{
 "presets": ["env"]
}

安裝 scss

yarn add node-sass 
yarn add sass-loader

之后只需要在 vue 文件的 style 標(biāo)簽加一條屬性聲明下就好

<style lang="sass">
</style>
# or
<style lang="scss">
</style>

關(guān)于“使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用的案例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。