Nuxt.js 是一个基于 Vue.js 的通用应用框架。
是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：
安装：$ npx create-nuxt-app<项目名>
或者用 yarn ：
$yarncreate 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
应用现在运行在 http://localhost:3000 上运行。
注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。
然后启动项目：
$npmrun dev
资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
关于 assets 目录的更多信息
组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
布局目录
布局目录 layouts 用于组织应用的布局组件。
若无额外配置，该目录不能被重命名。
关于布局的更多信息
中间件目录
middleware 目录用于存放应用的中间件。
关于中间件的更多信息
页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
若无额外配置，该目录不能被重命名。
关于页面的更多信息
插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
关于插件的更多信息
静态文件目录
静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/robots.txt 映射至 /robots.txt
若无额外配置，该目录不能被重命名。
关于静态文件的更多信息
Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
若无额外配置，该目录不能被重命名。
关于 store 的更多信息
nuxt.config.js 文件
nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
若无额外配置，该文件不能被重命名。
关于 nuxt.config.js 的更多信息
package.json 文件
package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
该文件不能被重命名。
别名
别名目录
~ 或 @srcDir
~~ 或 @@rootDir
默认情况下，srcDir 和 rootDir 相同。
提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。
路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用
例如:
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用
例如:
模板
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用
例如:
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
异步数据
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：
返回一个 Promise, nuxt.js 会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
使用 async 或 await (了解更多)
// 初次进入页面
export default {
// 异步data 在渲染之前帮我发几个请求、 服务端
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里的不能用时自己去官网重新下载
http://www.axios-js.com/zh-cn/docs/
安装
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
export default {
// 异步data 在渲染之前帮我发几个请求、 服务端
async asyncData({app}){//形参 路由信息对象
let res=await app.$axios.get("http://localhost:1024/api/goodList?page=20");
return {
list:res
}
},
data(){
return {
title:"hello"
}
},
created(){
}
}