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

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營(yíng)銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營(yíng)銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

安裝 nuxt.js

Nuxt.js 官方提功了兩種方法來進(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)境不用考慮有沒有）

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 框架方便快速開發(fā)，提供了很多現(xiàn)成的樣式，近幾年聽到最多的就是 Element UI

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

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

7.選擇渲染模式

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

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

8.作者

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

9.選擇包管理工具

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

10.選擇完成開始安裝

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í)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前文章：使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用的案例-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://aaarwkj.com/article14/googe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、App設(shè)計(jì)、企業(yè)建站、微信小程序、用戶體驗(yàn)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)