Nuxt的介紹及簡單安裝(vue-cli4.x)

一、簡介

Nuxt.js是一個基於Vue.js的輕量級應用框架 可以在服務器端將vue渲染成html返回服務器

Nuxt可用來創建服務端渲染 (SSR) 應用 也可充當靜態站點引擎生成靜態站點應用 具有優雅的代碼結構分層和熱加載等特性
通過對客戶端/服務器端基礎架構的抽象組織 Nuxt.js主要關注應用的UI渲染

SSR(服務端渲染)相比SPA(單頁面應用)的優點:

  • 對SEO的支持
    SPA(單頁應用)對搜索引擎不太好 搜索引擎無法抓取
    SSR的常用場景:諸如新聞網站 博客網站 電影網站等需要搜索引擎提供流量的網站
  • 2、加載速度會比SPA應用更快
    SPA是將所有的資源都加載到客戶端 然後打開
    而SSR是在服務器端渲染完頁面直接返回瀏覽器

Nuxt的優點:

  • 基於Vue.js
  • 自動代碼分層
  • 服務端渲染(SSR)
  • 強大的路由功能 支持異步數據
  • 靜態文件服務
  • ES6/ES7語法支持
  • 打包和壓縮JS和CSS
  • HTML頭部標籤管理
  • 本地開發支持熱加載
  • 繼承ESLint
  • 支持各種樣式的預處理器 例如SASS LESS Stylus等

二、安裝

在vue-cli的老版本中 是可以使用vue init nuxt/starter進行安裝的
但在新版本的vue-cli中不行了

使用官方推薦的npx來安裝:

(npm的5.2.x版本後默認安裝了npx)

只需要輸入npx create-nuxt-app 項目名即可下載Nuxt
使用該安裝方式的好處是 可以自由選擇不同的模塊和組件進行搭配

1、選擇程序語言:

在這裏插入圖片描述

2、選擇包管理工具:

在這裏插入圖片描述

3、選擇UI框架:

在這裏插入圖片描述

4、選擇服務器端框架(none爲Nuxt默認服務器):

在這裏插入圖片描述

5、選擇模塊(用空格進行選擇/取消):

在這裏插入圖片描述

6、選擇工具:

在這裏插入圖片描述

7、選擇測試框架:

在這裏插入圖片描述

8、選擇SSR(服務端渲染)還是SPA(單頁面應用):

在這裏插入圖片描述

9、選擇開發工具:

在這裏插入圖片描述
接下來就會自動安裝npm包 稍等一會即可

安裝成功:
在這裏插入圖片描述
項目目錄:
在這裏插入圖片描述

啓動

cd進入項目
輸入npm run dev啓動
在這裏插入圖片描述
默認監聽3000端口

訪問成功:
在這裏插入圖片描述


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章