nuxt.js使用方法

Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它，我们可以快速开发一个基于 vue 的 ssr 单页面应用。

目录结构

.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

其中：

1. assets: 资源文件。放置需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等。

2. components: 组件。这里存放在页面中，可以复用的组件。

3. layouts: 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。如果需要在普通页面中使用下级路由，则需要在页面中添加 <nuxt-child />。该目录名为Nuxt.js保留的，不可更改。

4. middleware: 中间件。存放中间件。可以在页面中调用： middleware: 'middlewareName' 。

5. pages: 页面。一个 vue 文件即为一个页面。index.vue 为根页面。

1. 若需要二级页面，则添加文件夹即可。

2. 如果页面的名称类似于 _id.vue （以 _ 开头），则为动态路由页面，_ 后为匹配的变量（params）。

3. 若变量是必须的，则在文件夹下建立空文件 index.vue。更多的配置请移步至 官网 。

6. plugin: 插件。用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。需要注意的是，在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个钩子方法会在 客户端和服务端均被调用。其他钩子方法仅在客户端被调用。

7. static: 静态文件。放置不需要经过 webpack 打包的静态资源。如一些 js, css 库。

8. store: 状态管理。具体使用请移步至 官网。

9. nuxt.config.js: nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。具体配置请移步至 官网。

Nuxt 特有函数

首先，了解一下在 nuxt 的页面中独有的函数/变量：

asyncData(context)

asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的，所以，请求数据时，不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

asyncData代码实例：

async asyncData(){
        
        let {status,data:{list}}= await axios.get('http://localhost:8000/city/list');
        return {
            list
        }
    }

fetch(context)

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。为了让获取过程可以异步，你需要返回一个 Promise，Nuxt.js 会等这个 promise 完成后再渲染组件。

fetch 会在组件每次加载前被调用（在服务端或切换至目标路由之前）。