安裝 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>
複製程式碼