Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。
?是一個基于 Vue.js 的輕量級應(yīng)用框架,可用來創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用,也可充當(dāng)靜態(tài)站點引擎生成靜態(tài)站點應(yīng)用,具有優(yōu)雅的代碼結(jié)構(gòu)分層和熱加載等特性窗悯。
確保安裝了 npx（npx 在 NPM 版本 5.2.0 默認(rèn)安裝了）：
安裝：$ npx create-nuxt-app<項目名>
或者用 yarn ：
$yarncreate nuxt-app<項目名>
它會讓你進行一些選擇:
在集成的服務(wù)器端框架之間進行選擇:
None (Nuxt 默認(rèn)服務(wù)器)
Adonis?(WIP)
選擇您喜歡的 UI 框架:
None (無)
選擇您喜歡的測試框架:
None (隨意添加一個)
選擇你想要的 Nuxt 模式 (Universal?or?SPA)
添加?axios module?以輕松地將 HTTP 請求發(fā)送到您的應(yīng)用程序中区匣。
添加?EsLint?以在保存時代碼規(guī)范和錯誤檢查您的代碼。
添加?Prettier?以在保存時格式化/美化您的代碼蒋院。
當(dāng)運行完時亏钩，它將安裝所有依賴項莲绰，因此下一步是啟動項目:
$cd<project-name>$npmrun dev
應(yīng)用現(xiàn)在運行在 http://localhost:3000 上運行。
注意：Nuxt.js 會監(jiān)聽?pages?目錄中的文件更改姑丑，因此在添加新頁面時無需重新啟動應(yīng)用程序蛤签。
然后啟動項目：
$npmrun dev
資源目錄
資源目錄?assets?用于組織未編譯的靜態(tài)資源如?LESS、SASS?或?JavaScript栅哀。
組件目錄?components?用于組織應(yīng)用的 Vue.js 組件震肮。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有?asyncData?方法的特性留拾。
布局目錄?layouts?用于組織應(yīng)用的布局組件戳晌。
若無額外配置，該目錄不能被重命名痴柔。
middleware?目錄用于存放應(yīng)用的中間件躬厌。
頁面目錄?pages?用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的?.vue?文件并自動生成對應(yīng)的路由配置竞帽。
若無額外配置，該目錄不能被重命名鸿捧。
插件目錄?plugins?用于組織那些需要在?根vue.js應(yīng)用?實例化之前需要運行的 Javascript 插件屹篓。
靜態(tài)文件目錄?static?用于存放應(yīng)用的靜態(tài)文件，此類文件不會被 Nuxt.js 調(diào)用 Webpack 進行構(gòu)建編譯處理匙奴。服務(wù)器啟動的時候堆巧，該目錄下的文件會映射至應(yīng)用的根路徑?/?下。
舉個例子:?/static/robots.txt?映射至?/robots.txt
若無額外配置泼菌，該目錄不能被重命名谍肤。
store?目錄用于組織應(yīng)用的?Vuex 狀態(tài)樹?文件。 Nuxt.js 框架集成了?Vuex 狀態(tài)樹?的相關(guān)功能配置哗伯，在?store?目錄下創(chuàng)建一個?index.js?文件可激活這些配置荒揣。
若無額外配置，該目錄不能被重命名焊刹。
nuxt.config.js?文件用于組織 Nuxt.js 應(yīng)用的個性化配置系任，以便覆蓋默認(rèn)配置。
若無額外配置虐块，該文件不能被重命名俩滥。
package.json?文件用于描述應(yīng)用的依賴關(guān)系和對外暴露的腳本接口。
該文件不能被重命名贺奠。
別名目錄
~?或?@srcDir
~~?或?@@rootDir
默認(rèn)情況下霜旧，srcDir?和?rootDir?相同。
提示:?在您的?vue?模板中, 如果你需要引入?assets?或者?static?目錄, 使用?~/assets/your_image.png?和?~/static/your_image.png方式儡率。
路由
Nuxt.js 依據(jù)?pages?目錄結(jié)構(gòu)自動生成?vue-router?模塊的路由配置挂据。
要在頁面之間使用路由以清，我們建議使用<nuxt-link>?標(biāo)簽。
例如:
<template><nuxt-linkto="/">首頁</nuxt-link></template>
Nuxt.js 依據(jù)?pages?目錄結(jié)構(gòu)自動生成?vue-router?模塊的路由配置棱貌。
要在頁面之間使用路由玖媚，我們建議使用<nuxt-link>?標(biāo)簽。
例如:
<template><nuxt-linkto="/">首頁</nuxt-link></template>
模板
Nuxt.js 依據(jù)?pages?目錄結(jié)構(gòu)自動生成?vue-router?模塊的路由配置婚脱。
要在頁面之間使用路由今魔，我們建議使用<nuxt-link>?標(biāo)簽。
例如:
<template><nuxt-linkto="/">首頁</nuxt-link></template>
Nuxt.js 擴展了 Vue.js障贸，增加了一個叫?asyncData?的方法错森，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)。
異步數(shù)據(jù)
Nuxt.js 擴展了 Vue.js篮洁，增加了一個叫?asyncData?的方法涩维，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)。
Nuxt.js 提供了幾種不同的方法來使用?asyncData?方法袁波，你可以選擇自己熟悉的一種來用：
返回一個?Promise, nuxt.js 會等待該Promise被解析之后才會設(shè)置組件的數(shù)據(jù)瓦阐，從而渲染組件.
使用?async 或 await?(了解更多)
//?初次進入頁面
export?default?{
????//?異步data??在渲染之前幫我發(fā)幾個請求、??服務(wù)端
????async?asyncData(){//形參?路由信息對象
?????????let?res=await?fetch("http://192.168.204.20:1024/api/goodList").then(r=>r.json());
?????????console.log(res);
????????return?{
????????????list:res
????????}
????},
????data(){
????????return?{
????????????title:"hello"
????????}
????},
????created(){
????}
}
$axios Nuxt.js里的不能用時自己去官網(wǎng)重新下載
http://www.axios-js.com/zh-cn/docs/
安裝
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
export?default?{
????//?異步data??在渲染之前幫我發(fā)幾個請求篷牌、??服務(wù)端
????async?asyncData({app}){//形參?路由信息對象
????????let?res=await?app.$axios.get("http://localhost:1024/api/goodList?page=20");
????????return?{
????????????list:res
????????}
????},
????data(){
????????return?{
????????????title:"hello"
????????}
????},
????created(){
????}
}
