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

安裝 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 標籤加一條屬性聲明下就好

<style lang="sass">

</style>

# or

<style lang="scss">

</style>