DAY 18 - Vue + Vite + Nuxt 建立專案，享受最優質的 DX

Vue3 + Vite + Nuxt

這次我主要是選擇使用Vue3 + Vite + Nuxt3 來建立專案，這三者搭配開發者體驗實在是太棒了，讓我們來看下去

• Vue3 composition API - 有別於 Vue2 option API 在後續不易維護、元件難重複使用，Vue3吸收了 Recat的優點，在寫法上更加彈性、自由，也導入TypeScript讓Vue3寫法架構更受歡迎。

• Vite - 最快速的前端建構工具，在早期會使用 Vue cli 來進行架構居多， Vue cli是基於 Webpack 構建，他會將所有代碼打包再啟動，但是這樣會造就渲染時特別慢(zzzz)，再小型專案上可能還可以遇到大型專案真的慢到受不了，之後 Vue 團隊開發出了Vite ，超快速的編譯讓人驚艷，Vite 主要是攔截變動更改過的資料，並只編譯更改過的資料，來達到效能優化，解決啟動編譯過慢的問題。

• Nuxt - 解決SPA SEO搜尋引擎的問題，SPA、SSR輕鬆切換不煩惱，不只解決了問題開發上也帶來極高的開發者體驗(DX)，像是自動匯入元件、自動生成路由、豐富的Module、TypeScript相容性高，後面篇幅也會再一一分享 Nuxt 使用及便利，總之太香了!

前置 (Node.js安裝/Nvm版本切換)

首先要安裝 Node.js，我使用的 Node.js 版本是 18.17.1，如果本來電腦有安裝其他版本的，安裝遇到錯誤的可以使用 Nvm 切換版本。

如何切換 Node.js版本

• NVM 下載 - 選擇 nvm-setup.exe 安裝
  安裝成功後可以輸入nvm確認有無安裝成功，成功會出現下圖(安裝成功)

• 輸入指令 nvm install 18.17.1 (安裝版本)
• 切換版本 nvm use 18.17.1 (安裝版本) (nvm ls 可以查看目前有安裝的版本)
• 確認版本 node - v

建立專案

今天我們先來建立我們的專案環境，第一步先創建專案，輸入指令 :

• npm create vite@latest 使用 Vite 指令建立專案
• 輸入專案名稱 ? Project name: » 專案名稱
• 選擇你的框架 > 這邊選擇用Vue

• 選擇你類型 > 選擇Nuxt，接著會請你安裝Nuxt所需的nuxi選擇y

• 選擇安裝類型 > 選擇npm (看個人)

• 開始安裝
  

• npm run dev 執行，基本的專案就架構成功了 ，是不是沒有很難呢! 快來試看看 !!

也可以用 nuxt3指令來安裝喔 npx nuxi@latest init <project-name>

Eslint + Prettier

Eslint 是一個檢查程式碼語法、編寫的工具，並在過程中會提出建議改善你的程式碼品質，這次想嘗試下使用來進行開發(也是初學)，而 Prettier 則是一個程式碼格式化工具，會使你的程式碼風格(CodingStyle)一致，在閱讀上會更好閱讀，但是兩個一起安裝就...會遇到很多兩者衝突障礙(跪)。

你一定很疑惑兩個感覺很像啊 ? 有需要兩個都要安裝嗎 ?
如果你有實際使用過你會發現兩者功用其實不太一樣，Eslint 重視語法的編寫有無錯誤，像是宣告未使用就會提示，或是有無意義的程式碼，而 Prettier 則是排版，要幾格縮排，幾行內要換行，要使用 ' "等，更重視排版及格式化。

這邊我安裝是依照 Ryan 大大今年的鐵人賽教學文章 Nuxt 3 + ESLint + Prettier 環境建置，中間遇到品頸也有找他求救，很推薦他寫的 Nuxt 教學文章(大家快去看!!)

安裝 Eslint + Prettier

注意 !! 兩者安裝不同裝置下容易有錯誤及衝突，官方其實是不建議同時安裝兩者(我就愛用X)，Use ESLint，所以如果真的安裝卡關也可安裝 Eslint 就好

一、安裝 Eslint
這邊我們安裝的是 @nuxtjs/eslint-config 整合版本(如下說明)，我使用的是 TypeScript 所以我安裝 TS版本

出處來自 ryan 的分享，節錄重點給大家
由 Base -> Vue -> Nuxt 一層一層的擴充，由基礎的 eslint:recommended -> plugin:@typescript-eslint/eslint-recommended -> plugin:vue/vue3-recommende，繼承擴展下去

npm install -D @nuxtjs/eslint-config-typescript

二、新增 .eslintrc.cjs 檔案在根目錄
參考 Ryan 教學加入 typescript

module.exports = {
  env: {
    browser: true,
    es2023: true
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'prettier'],
  parserOptions: {
    ecmaVersion: 2023,
    sourceType: 'module'
  },
  plugins: ['prettier'],
  rules: {
    'no-undef': 'off',
    'prettier/prettier': 'error'
  }
}

三、安裝 Prettier

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

四、新增 .prettierrc.cjs 在根目錄
這邊可以依照個人需求自行設定，可以參考 Prettier 官方提供的畫面模擬設定

module.exports = {
   //自行新增 prettier 樣式
  // Ex. 每行長度
  printWidth: 200     
}

遇到錯誤分享 - 行尾符號 CRLF、LF 導致的錯誤

這邊分享當時安裝時遇到的兩者衝突，搞到快崩潰 orz ，首先我安裝完 Eslint 照 Ryan 大大影片教學，成功安裝 Eslint ，然後接著安裝 Prettier 時出現滿滿錯誤 ，Delete ␍eslint(prettier/prettier)

因為性質關係 Eslint、Prettier 時在安裝時如果沒設定好會產生衝突，但是因為兩者需求不同，所以 就有eslint-config-prettier + eslint-plugin-prettier 解決衝突問題，詳情兩者衝突可以參考此篇解决Eslint 和 Prettier 之间的冲突

節錄重點分享給大家 :

• eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
• eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。 安装依赖并修改.eslintrc文件

錯誤解決方法 :

• 第一種方法 : 輸入指令 ，然後重新clone 專案即可正常

//這行是關閉自動轉換為 CRLF ，本來檔案是什麼格式就是什麼格式
git config --global core.autocrlf false
// 統一換行符號為 LF
git config --global core.eol lf

• 第二種方法 : Vscode 右下角切換 行尾 > 切換為LF，缺點是每個檔案各自獨立，要各自切換