Nuxt.js 安裝

Nuxt.js 十分簡(jiǎn)單易用。一個(gè)簡(jiǎn)單的項(xiàng)目只需將 nuxt 添加為依賴組件即可。

運(yùn)行 create-nuxt-app

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

確保安裝了npx（npx在NPM版本5.2.0默認(rèn)安裝了）：

$ npx create-nuxt-app <項(xiàng)目名>

或者用yarn ：

$ yarn create nuxt-app <項(xiàng)目名>

它會(huì)讓你進(jìn)行一些選擇:

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

當(dāng)運(yùn)行完時(shí)，它將安裝所有依賴項(xiàng)，因此下一步是啟動(dòng)項(xiàng)目:

$ cd <project-name>
$ npm run dev

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

注意：Nuxt.js 會(huì)監(jiān)聽(tīng) pages 目錄中的文件更改，因此在添加新頁(yè)面時(shí)無(wú)需重新啟動(dòng)應(yīng)用程序。

了解模板項(xiàng)目的目錄結(jié)構(gòu)： 目錄結(jié)構(gòu)。

從頭開(kāi)始新建項(xiàng)目

如果不使用 Nuxt.js 提供的 starter 模板，我們也可以從頭開(kāi)始新建一個(gè) Nuxt.js 應(yīng)用項(xiàng)目，過(guò)程非常簡(jiǎn)單，只需要 1個(gè)文件和1個(gè)目錄。如下所示：

$ mkdir <項(xiàng)目名>
$ cd <項(xiàng)目名>

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

新建 package.json 文件

package.json 文件用來(lái)設(shè)定如何運(yùn)行 nuxt：

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

上面的配置使得我們可以通過(guò)運(yùn)行 npm run dev 來(lái)運(yùn)行 nuxt。

安裝 nuxt

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

$ npm install --save nuxt

pages 目錄

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

創(chuàng)建 pages 目錄：

$ mkdir pages

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

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

然后啟動(dòng)項(xiàng)目：

$ npm run dev

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

注意：Nuxt.js 會(huì)監(jiān)聽(tīng) pages 目錄中的文件更改，因此在添加新頁(yè)面時(shí)無(wú)需重新啟動(dòng)應(yīng)用程序。

了解更多關(guān)于Nuxt.js應(yīng)用的目錄結(jié)構(gòu)： 目錄結(jié)構(gòu)。