Nuxt.js是什麼?可以吃嗎?

每一個工具的誕生，都是為了＂解決問題＂，而 Nuxt.js 是用來解決什麼問題呢？

1. 解決 SPA ( Single Page Application ) 單頁式應用 SEO 的問題
2. 免去 Webpack 一堆設定的煩惱
3. 免去 Vue-Router 一堆設定的煩惱

簡單來說，就是一個集 Vue 2、Vue-Router、Vuex、webpack、babel ...於一身的超級懶人包， Vue Cli 進化版。

使用Nuxt.js之前，需要具備什麼技能呢？

1. Vue 基礎
2. Vue-Router 基礎
3. Vuex 基礎

簡單來說， Nuxt.js 就是圍繞著 Vue 而生的工具， Vue 為基底中的基底，而 Nuxt.js 便是 Vue 生態系中的頂端王者，讓我們在使用 Vue 系列相關工具能更為便利，所以建議對於 Vue 有一定基礎後，再來學習 Nuxt.js ，能有較好的學習曲線。

Nuxt.js如何開始使用呢？讓我們一起玩看看

超級簡單超級快速起手式

npx create-nuxt-app@2

(因為目前找到的教學都是2.15版本，所以我加上@2指定版本，實際使用請依照專案需求來決定版本哦！)

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
<-- 專案名稱 -->
? Project name ClassSchedule
<-- 專案敘述 -->
? Project description My tremendous Nuxt.js project
<-- 作者名稱 -->
? Author name RedBean
<-- 要用TypeScript還是JavaScript -->
? Choose programming language JavaScript     
<-- 套件管理工具選擇 -->
? Choose the package manager Npm      
<-- 選擇UI框架 -->
? Choose UI framework None
<-- 選擇伺服器框架 -->
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
<-- 選擇程式碼規範檢查工具 -->
? Choose linting tools ESLint, Prettier 
<-- 選擇測試工具 -->
? Choose test framework None
<-- 選擇Nuxt模式SSR/SPA -->
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

經過了一連串的專案客製化選項後，恭喜您，完成了第一次的安裝體驗。

可在這時候出了三個錯誤提示，別緊張，只是需要更新eslint相關套件即可。

D:\github\ClassSchedule\components\Logo.vue 
  25:12  error  clear  vue/comment-directive

D:\github\ClassSchedule\layouts\default.vue 
  5:12  error  clear  vue/comment-directive 

D:\github\ClassSchedule\pages\index.vue     
  25:12  error  clear  vue/comment-directive

✖ 3 problems (3 errors, 0 warnings)

將下列三個套件更新，即可正常運作囉!

"@nuxtjs/eslint-config": "^6.0.1",
"@nuxtjs/eslint-module": "^3.0.2",
"eslint": "^7.32.0",

接著使用npm run dev 即可看到第一個用Nuxt.js創造出來的頁面囉！

npm run dev

明天我們會開始介紹目錄架構～
因為我也是超級入門新手，大家互相研究，如有不足之處，敬請見諒：］