一、簡介
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端口
訪問成功: