建立一個 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 安裝

可以給點牡蠣。
Google AD