nuxt.js簡單來說是Vue.js的通用框架，最常用的就是SSR（服務端渲染），nuxt.js這個框架，用Vue開發多頁面應用，並在服務端完成渲染，可以直接用命令把我們制作的vue項目生成為靜態的html。
那么首先要知道什么是客戶端渲染與服務端渲染
什么是服務端渲染？
后端先調用數據庫，獲得數據之后，將數據何頁面元素進行拼接，組合成完整的html頁面，在直接返回給瀏覽器，以用戶瀏覽。
什么是客戶端渲染？
數據由瀏覽器通過ajax動態取得，再通過js將數據填充到demo元素上最終展示到網頁中，這樣的過程叫客戶端渲染。
服務端渲染與客戶端渲染那個更優秀？
服務端渲染需要消耗更多的服務端資源（cpu,內存）
客戶端渲染可以將靜態資源部署到cdn上，實現高並發。
服務端渲染對seo更友好。
Nuxt.js是特點（優點）：
- 基於
Vue - 自動代碼分層
- 服務端渲染
- 強大的路由功能，支持異步數據
- 靜態文件服務
EcmaScript6和EcmaScript7的語法支持- 打包和壓縮
JavaScript和Css HTML頭部標簽管理- 本地開發支持熱加載
- 集成
ESLint - 支持各種樣式預編譯器
SASS、LESS等等 - 支持
HTTP/2推送
Nuxt.js的適用情況？
nuxt.js適合做博客，電影，咨詢，新聞這樣的需要收索引擎提供流量的項目，如果要做移動端的項目那么大可沒必要只用這個框架了。
Vue是如何實現服務端渲染的？
1）安裝依賴：
用npm來安裝vue-cli這個框架。npm install vue-cli -g
安裝完成后可以使用vue -V 來測試是否安裝成功。（注意：這里要使用大寫的V，小寫無效）
2）使用vue安裝 nuxt
安裝好vue-cli后，就可以使用init命令來初始化Nuxt.js項目。
vue init nuxt/starter
這時候他會在github上下載模版，然后會詢問你項目的名稱叫什么，作者什么的，這些完全可以根據自己的愛好填寫。
3）使用npm install安裝依賴包
npm install
這個過程是要等一會的，如果你這個過程安裝失敗，可以直接誒刪除項目中的node_modules文件夾后，重新npm install進行安裝。
4）使用npm run dev 啟動服務
直到點開目錄，看到以下目錄結構的介紹。
└─my-nuxt-demo
├─.nuxt // Nuxt自動生成，臨時的用於編輯的文件，build
├─assets // 用於組織未編譯的靜態資源如LESS、SASS或JavaScript,對於不需要通過 Webpack 處理的靜態資源文件，可以放置在 static 目錄中
├─components // 用於自己編寫的Vue組件，比如日歷組件、分頁組件
├─layouts // 布局目錄，用於組織應用的布局組件，不可更改⭐
├─middleware // 用於存放中間件
├─node_modules
├─pages // 用於組織應用的路由及視圖,Nuxt.js根據該目錄結構自動生成對應的路由配置，文件名不可更改⭐
├─plugins // 用於組織那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。
├─static // 用於存放應用的靜態文件，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。文件夾名不可更改。⭐
└─store // 用於組織應用的Vuex 狀態管理。文件夾名不可更改。⭐
├─.editorconfig // 開發工具格式配置
├─.eslintrc.js // ESLint的配置文件，用於檢查代碼格式
├─.gitignore // 配置git忽略文件
├─nuxt.config.js // 用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。文件名不可更改。⭐
├─package-lock.json // npm自動生成，用於幫助package的統一設置的，yarn也有相同的操作
├─package.json // npm 包管理配置文件
├─README.md
nuxt的常用配置文件以及配置項
const pkg = require('./package')
module.exports = {
mode: 'universal', // 當前渲染使用模式
head: { // 頁面head配置信息
title: pkg.name, // title
meta: [ // meat
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [ // favicon，若引用css不會進行打包處理
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#fff' }, // 頁面進度條
css: [ // 全局css（會進行webpack打包處理）
'element-ui/lib/theme-chalk/index.css'
],
plugins: [ // 插件
'@/plugins/element-ui'
],
modules: [ // 模塊
'@nuxtjs/axios',
],
axios: {},
build: { // 打包
transpile: [/^element-ui/],
extend(config, ctx) { // webpack自定義配置
}
}
}
nuxt的運行命令
{
"scripts": {
// 開發環境
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
// 打包
"build": "nuxt build",
// 在服務端運行
"start": "cross-env NODE_ENV=production node server/index.js",
// 生成靜態頁面
"generate": "nuxt generate"
}
}
具體以及詳細的介紹可以去一個不知名的大神那里去學習，附上大神的地址https://juejin.im/post/5cc81e1a6fb9a032414f695b