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的使用
- 安装echarts：
cnpm install echarts -S
- 在plugins目录下创建echarts.js文件并在里面引入echarts依赖
import Vue from 'vue'
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）
- 在pages下创建echarts.vue
<template><div><div style="width:500px;height:500px" ref="chart"></div></div>
</template><script>
const echarts = require("echarts");
export default {data() {return {};},methods: {initCharts() {let myChart = echarts.init(this.$refs.chart);// 绘制图表myChart.setOption({title: { text: "Vue使用Echarts" },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]});}},mounted() {this.initCharts();}
};
</script>- 运行cnpm run dev，打开localhost:3000/echarts即可查看运行内容
2.Nuxt.js框架中axios的使用
- 安装axios（这里需要安装Nuxt.js框架版本的专用axios）
cnpm install @nuxtjs/axios
- 配置axios
在nuxt.config.js下
module.exports = {modules:['@nuxtjs/axios',],axios: {// proxyHeaders: false}
}
- 使用axios
组件中使用axios：
<template><div><div><p>Test</p>{{ info }}<h1>Bitcoin Price Index</h1><div v-for="currency in info" :key="currency.id" class="currency">{{ currency.description }}:<span class="lighten"><span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}</span></div></div></div>
</template><script>
export default {data() {return {info: null};},mounted() {this.$axios.get("https://api.coindesk.com/v1/bpi/currentprice.json").then(response => (this.info = response.data.bpi)).catch(function(error) {// 请求失败处理console.log(error);});},filters: {currencydecimal(value) {return value.toFixed(2);}}
};
</script>