安裝

Nuxt.js 十分簡單易用。一個簡單的項目只需將?nuxt?添加為依賴組件即可。

Nuxt.js 基礎知識

了解如何在視頻中快速使用Nuxt.js

由VueSchool制作視頻課程，用于支持Nuxt.js開發

運行 create-nuxt-app

為了快速入門，Nuxt.js團隊創建了腳手架工具?create-nuxt-app。

確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：

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

或者用yarn ：

$ yarn create nuxt-app <項目名>

它會讓你進行一些選擇:

在集成的服務器端框架之間進行選擇:

• None (Nuxt默認服務器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Fastify
• Adonis?(WIP)

選擇您喜歡的UI框架:

• None (無)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy
• iView
• Tachyons

選擇您喜歡的測試框架:

• None (隨意添加一個)
• Jest
• AVA

選擇你想要的Nuxt模式 (Universal?or?SPA)

添加?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?目錄中的文件更改，因此在添加新頁面時無需重新啟動應用程序。

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

總結

以上是生活随笔為你收集整理的NUXT快速开始，选择Vuetify的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。