使用 Nuxt.js 快速搭建服務端渲染(SSR) 應用

leanote 發布于2019-06-26 17:59 / 1757人閱讀

摘要：安裝官方提功了兩種方法來進行項目的初始化，一種是使用團隊的腳手架工具，一種是根據自己的需求自由配置使用腳手架適合新手，對后臺框架有所了解按照自己需求自由配置，需要對如何配置以及后臺框架有所了解。兩種方式比較下就是原生和插件的區別。

安裝 nuxt.js

Nuxt.js 官方提功了兩種方法來進行項目的初始化，一種是使用Nuxt.js團隊的腳手架工具 create-nuxt-app ，一種是根據自己的需求自由配置
使用腳手架適合新手，對 nodejs 后臺框架有所了解；按照自己需求自由配置，需要對如何配置 webpack 以及 nodejs 后臺框架有所了解。
兩種方式比較下就是原生和插件的區別。

使用腳手架安裝

需要有 nodejs 或者 yarn 環境，推薦使用 vscode 自帶的控制臺輸入命令行命令進行操作

在有了環境之后直接輸入以下命令就可以直接創建一個項目（npx 在npm 5.2.0默認安裝，使用最新穩定nodejs環境不用考慮有沒有）

npx create-nuxt-app <項目名>

#或者用yarn

yarn create nuxt-app <項目名>

之后他會提示你進行一些選擇
1.項目名

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

2.項目描述

這里是關于項目的描述，比如是做什么的，也可以之后在 package.js 中設置 description 屬性

3.選擇服務器端框架

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

4.擴展插件
選擇 axios EsLint Prettier

axios 發送HTTP請求

EsLint 在保存時代碼規范和錯誤檢查自己的代碼。

Prettier 在保存時格式化/美化自己的代碼。

5.選擇 UI 框架

UI 框架方便快速開發，提供了很多現成的樣式，近幾年聽到最多的就是 Element UI

6.選擇測試框架

測試框架是用來檢測程序有沒有到達預期的目的，有沒有出錯，這里暫時用不到，所以選擇 none 就好

7.選擇渲染模式

這里分單頁應用（spa）以及普遍的方式（Universal），單頁應用有很多路由但是頁面只有一個，所有能看到的頁面都是 js 即時生成的 dom，第二種是在服務器生成 html ，有多少路由就有多少頁面。
使用 nuxt 就是為了解決 SEO 的問題，使其實現所有網站路徑完全被收錄

8.作者

這個也可以之后在 package.js 中設置 author 屬性

9.選擇包管理工具

這里選擇那個都可以，看自己習慣用哪個

10.選擇完成開始安裝

11.安裝完成

提示信息

項目目錄

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

添加其他常用功能

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

安裝 babel

yarn add babel-cli babel-preset-env

配置文件
.babelrc

{
  "presets": ["env"]
}

安裝 scss

yarn add node-sass 
yarn add sass-loader

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



# or

GPU云服務器云服務器 nuxt.js 快速搭建釘釘微應用服務端渲染搭建ssr服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19490.html

使用 Nuxt.js 快速搭建服務端渲染(SSR) 應用

摘要：安裝官方提功了兩種方法來進行項目的初始化，一種是使用團隊的腳手架工具，一種是根據自己的需求自由配置使用腳手架適合新手，對后臺框架有所了解按照自己需求自由配置，需要對如何配置以及后臺框架有所了解。兩種方式比較下就是原生和插件的區別。安裝 nuxt.js Nuxt.js 官方提功了兩種方法來進行項目的初始化，一種是使用Nuxt.js團隊的腳手架工具 create-nuxt-app ，一種...

luodongseu 2019-08-26 13:37 評論0 收藏0
Vue現有項目改造為Nuxt項目

摘要：好了，項目啟動了，目錄結構也清楚了，接下來就是整個現有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新項目的改造過程及分享改造過程中遇到的問題公司項目，最初只為了實現前后端分離式開發，直接選擇了vue框架進行開發，然而現在項目基本完成了，發現蜘蛛根本就抓取不到網站數據，搜索引擎搜出來，都是一片空白沒有數據，需要對項目做SEO優化。本人第一次接觸SEO的優化，完全...

Invoker 2019-08-26 10:25 評論0 收藏0
服務端預渲染之Nuxt（介紹篇）

摘要：為了解決問題，推出了服務端預渲染，以便提高對優化。應用，到了，單頁面應用優秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染。客戶端接收數據，然后完成最終渲染。通過對客戶端服務端基礎框架的抽象組織，主要關注的是應用的渲染。現在前端開發一般都是前后端分離，mvvm和mvc的開發框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發，但是由于前...

Shonim 2019-08-23 16:46 評論0 收藏0
vue服務端渲染demo將vue-cli生成的項目轉為ssr

摘要：無需使用服務器實時動態編譯，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同，服務器渲染應用程序，需要處于運行環境。更多的服務器端負載。目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 評論0 收藏0
淺談NUXT - 基于vue.js的服務端渲染框架

摘要：是一款基于的服務端渲染框架，跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。 Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統，受到很多前端開發人員的青睞。國內很多公司都在使用vue進行項目開發，我們正在使用的簡書，便是基于Vue來構建的。我們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息，使...

yearsj 2019-08-01 17:18 評論0 收藏0