Vue学习-Nuxt.js框架中Echarts与axios的使用

Nuxt框架介绍：
Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

除此之外，还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

服务端渲染(通过SSR)

您可以使用Nuxt.js作为框架来处理项目的所有UI呈现。

启动时nuxt，它将启动具有热更新加载的开发服务器，并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。

单页应用程序 (SPA)

如果您不想使用服务器端渲染或需要应用程序提供静态托管，则可以使用 nuxt --spa 命令即可使用 SPA 模式。 它为您提供了强大的SPA部署机制，无需使用 Node.js 来运行应用程序或任何特殊的服务器端处理。

如果你的项目有自己的 Web 服务器（例如用 Express.js 启动的Web服务），你仍然可以将 Nuxt.js 当作是中间件来使用，负责UI渲染部分的功能。在开发通用的 Web 应用过程中，Nuxt.js 是可插拔的，没有太多的限制，可通过 开发编码中使用Nuxt.js 了解更多的信息。

1.Nuxt.js框架中Echarts的使用

1. 安装echarts：

cnpm install echarts -S

2. 在plugins目录下创建echarts.js文件并在里面引入echarts依赖

import Vue from 'vue'
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）

3. 在pages下创建echarts.vue

<template>
  <div>
    <div style="width:500px;height:500px" ref="chart"></div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {