Nuxt.js 安裝

2020-02-13 17:06 更新
Nuxt.js 十分簡單易用。一個簡單的項目只需將 nuxt 添加為依賴組件即可。

運行 create-nuxt-app

為了快速入門,Nuxt.js團隊創(chuàng)建了腳手架工具 create-nuxt-app。

確保安裝了npx(npx在NPM版本5.2.0默認安裝了):

$ npx create-nuxt-app <項目名>

或者用yarn :

$ yarn create nuxt-app <項目名>

它會讓你進行一些選擇:

  1. 在集成的服務器端框架之間進行選擇:None (Nuxt默認服務器)ExpressKoaHapiFeathersMicroFastifyAdonis (WIP)
  2. 選擇您喜歡的UI框架:None (無)BootstrapVuetifyBulmaTailwindElement UIAnt Design VueBuefyiViewTachyons
  3. 選擇您喜歡的測試框架:None (隨意添加一個)JestAVA
  4. 選擇你想要的Nuxt模式 (Universal or SPA)
  5. 添加 axios module 以輕松地將HTTP請求發(fā)送到您的應用程序中。
  6. 添加 EsLint 以在保存時代碼規(guī)范和錯誤檢查您的代碼。
  7. 添加 Prettier 以在保存時格式化/美化您的代碼。

當運行完時,它將安裝所有依賴項,因此下一步是啟動項目:

$ cd <project-name>
$ npm run dev

應用現(xiàn)在運行在 http://localhost:3000 上運行。

注意:Nuxt.js 會監(jiān)聽 pages 目錄中的文件更改,因此在添加新頁面時無需重新啟動應用程序。

了解模板項目的目錄結構: 目錄結構。

從頭開始新建項目

如果不使用 Nuxt.js 提供的 starter 模板,我們也可以從頭開始新建一個 Nuxt.js 應用項目,過程非常簡單,只需要 1個文件和1個目錄。如下所示:

$ mkdir <項目名>
$ cd <項目名>

提示: 將 <項目名> 替換成為你想創(chuàng)建的實際項目名。

新建 package.json 文件

package.json 文件用來設定如何運行 nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我們可以通過運行 npm run dev 來運行 nuxt。

安裝 nuxt

一旦 package.json 創(chuàng)建好, 可以通過以下npm命令將 nuxt 安裝至項目中:

$ npm install --save nuxt

pages 目錄

Nuxt.js 會依據(jù) pages 目錄中的所有 *.vue 文件生成應用的路由配置。

創(chuàng)建 pages 目錄:

$ mkdir pages

創(chuàng)建我們的第一個頁面 pages/index.vue:

<template>
  <h1>Hello world!</h1>
</template>

然后啟動項目:

$ npm run dev

現(xiàn)在我們的應用運行在 http://localhost:3000 上運行。

注意:Nuxt.js 會監(jiān)聽 pages 目錄中的文件更改,因此在添加新頁面時無需重新啟動應用程序。

了解更多關于Nuxt.js應用的目錄結構: 目錄結構。


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號