建立一個 NuxtJS 專案吧!

發表於 | 更新於 | 分類於

前言

由於最近在接觸 NuxtJS 的專案，所以這邊紀錄一下該如何起手建立專案

起手式

首先這邊一開始會使用到指令不是 npm 指令，而是 npx 指令，這個指令在 NPM 版本 5.2.0 時就已經內建安裝了，所以如果不知道自己 NPM 版本的人可以輸入 npm -v 確認自己的版本號

NPM 版本號

那麼什麼是 npx?

通常我們在安裝套件的時候都必須要輸入 npm install -g，久而久之，我們的電腦裡面就會越越多黑洞專案，甚至有可能會出現所謂的套件汙染，所以簡單來理解就是 npx 會臨時安裝套件，完成之後就會移除該套件，這樣就不會發生所謂的全域汙染，但是如果是常使用的套件，還是會建議使用 npm，否則每次執行一次 npx 就又要重新臨時安裝。

快速安裝

接下來先 cd 到自己的專案目錄底下，並輸入以下指令

1
npx create-nuxt-app

安裝過程會稍微有點慢，等一下就好了

安裝中

安裝完成後 NuxtJS 會問你一些問題，由於我是習慣使用 npm，所以這邊我就選擇了 npm 安裝工具

Choose the package manager

接下來會問你要不要安裝 UI 框架，基本上我是都不安裝，那它提供的 UI 框架有以下

  • None
  • BootstrapVue
  • Vuetify
  • Bulma
  • Tailwind
  • Element UI
  • Ant Design Vue
  • Buefy
  • iView
  • Tachyons

Choose UI framework

接下來會問你的服務器，那它有提供以下幾種供你選擇，這邊直接選無

  • None
  • Express
  • Koa
  • Hapi
  • Feathers
  • Micro
  • Fastify
  • AdonisJS

Choose custom server framework

在來會問你使用 Nuxt 的模式，我是選擇 axios

Choose custom server framework

順便這邊也會問你是否使用開發工具，我將 ESLint 打開了

Choose linting tools

接下來就會問你是否要加入測試框架

測試框架

最後就會問你要採用哪一種模式，那使用 NuxtJS 當然就是使用 SSR 囉~

Choose test framework

完成之後就會開始安裝你的設置了~~~

完整設置

開啟 NuxtJS

Nuxt 預設會有三個指令可以使用，分別為

  • 開發模式 (本地端 server)
    • npm run dev
  • 生產模式
    • npm run build
    • npm run start

當專案完成後就可以試著輸入 npm run dev 執行 NuxtJS

執行完畢

通常預設 Server Url 是 localhost:3000，當你進去後若看到以下畫面，就代表你成功建立 Nuxt 專案了~~

專案建立成功

參考文獻

Nuxt 安裝

0%