安裝
Nuxt.js 十分簡單易用。一個簡單的項目只需將
nuxt
添加為依賴組件即可。
運行 create-nuxt-app
為了快速入門,Nuxt.js 團隊創建了腳手架工具 create-nuxt-app。
確保安裝了 npx(npx 在 NPM 版本 5.2.0 默認安裝了):
$ npx create-nuxt-app <項目名>
或者用 yarn :
$ yarn create nuxt-app <項目名>
它會讓你進行一些選擇:
- 在集成的服務器端框架之間進行選擇:
- 選擇您喜歡的 UI 框架:
- 選擇您喜歡的測試框架:
- 選擇你想要的 Nuxt 模式 (
Universal
orSPA
) - 添加 axios module 以輕松地將 HTTP 請求發送到您的應用程序中。
- 添加 EsLint 以在保存時代碼規范和錯誤檢查您的代碼。
- 添加 Prettier 以在保存時格式化/美化您的代碼。
當運行完時,它將安裝所有依賴項,因此下一步是啟動項目:
$ cd <project-name> $ npm run dev
應用現在運行在 http://localhost:3000 上運行。
注意:Nuxt.js 會監聽 pages
目錄中的文件更改,因此在添加新頁面時無需重新啟動應用程序。
從頭開始新建項目
如果不使用 Nuxt.js 提供的 starter 模板,我們也可以從頭開始新建一個 Nuxt.js 應用項目,過程非常簡單,只需要 1 個文件和 1 個目錄。如下所示:
$ mkdir <項目名> $ cd <項目名>
提示: 將 <項目名>
替換成為你想創建的實際項目名。
新建 package.json 文件
package.json
文件用來設定如何運行 nuxt
:
{ "name": "my-app", "scripts": { "dev": "nuxt" } }
上面的配置使得我們可以通過運行 npm run dev
來運行 nuxt
。
安裝 nuxt
一旦 package.json
創建好, 可以通過以下 npm 命令將 nuxt
安裝至項目中:
$ npm install --save nuxt
pages 目錄
Nuxt.js 會依據 pages
目錄中的所有 *.vue
文件生成應用的路由配置。
創建 pages
目錄:
$ mkdir pages
創建我們的第一個頁面 pages/index.vue
:
<template> <h1>Hello world!</h1> </template>
然后啟動項目:
$ npm run dev
現在我們的應用運行在 http://localhost:3000 上運行。
注意:Nuxt.js 會監聽 pages
目錄中的文件更改,因此在添加新頁面時無需重新啟動應用程序。