Nuxt.js 是什么？
- Nuxt.js 是一个基于 Vue.js 的通用应用框架。
- 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
- Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
- 对于追求SEO优化的站点尤其推荐！
特点
服务端渲染(通过 SSR)
- 您可以使用Nuxt.js作为框架来处理项目的所有 UI 呈现。
启动时nuxt，它将启动具有热更新加载的开发服务器，并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。
- 您可以使用Nuxt.js作为框架来处理项目的所有 UI 呈现。
静态化预渲染
- 支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过 nuxt generate 命令实现。该命令依据应用的路由配置将每一个路由静态化成为对应的 HTML 文件。
-| pages/
----| about.vue
----| index.vue静态化后
-| dist/
----| about/
------| index.html
----| index.html废话不多说，开始安装
npx create-nuxt-app <项目名>
或
yarn create nuxt-app <项目名>
// 输入命令后根据自己的实际需求进行配置目录结构
nuxt省略了我们配置vue-router、main.js 等繁琐流程，转而使用严格的命名格式进行路由匹配。
资源目录
assets ==>资源目录，用于组织未编译的静态资源如 LESS、SASS 或 JavaScript,全局样式、字体都建议放到这里。
components ==> 组件目录,组件都写放在这个文件夹里，注：Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
layouts ==> 布局目录， 用于组织应用的布局组件，注：若无额外配置，该目录不能被重命名。
middleware ==> 目录用于存放应用的中间件。
pages ==> 页面目录,Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。[ /home == home文件夹\index.vue]
plugins ==> 插件目录，用来注册第三方插件。注：使用第三方插件时先查看插件官网是否有相对应的配置，一般都有单独的说明，初学者在这里采坑比较多。
static ==> 静态文件目录，放在这里的文件不会被Nuxt.js调用Webpack执行，服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
store ==> 存放全局状态（vuex或pinia）文件。
nuxt.config.js ==> 用于 Nuxt.js 应用的个性化配置,一般plugins注册的第三方插件要在这里进行相关配置。
下面开始nuxt之旅
首先，我们先创建这样的目录结构
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue在根目录的index.vue 中做一次简单的路由跳转
<template>
//要在页面之间使用路由，我们建议使用<nuxt-link> 标签，to属性不能省略。
{/* nofollow : a 标签rel值 告诉搜索引擎 该页面不需要分享权重
External : a标签rel值 声明本网页属于外部网址
noopener noreferrer : rel值，当a设置了_blank时能规避钓鱼漏洞
*/}
<nuxt-link to="/" rel = "nofollow External noopener noreferrer" activeClass = "active">首页</nuxt-link>
</template>
//当前路由被选中时，颜色变红。
<style>
.active{
color: red;
}
</style>
如果需要动态路由
则需要这样配置路由
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue当访问 /user/123 路径时需要获取当前id的详情时，可以在params 参数中获取当前的ID进行数据请求（后面会讲到）
视图（Layout）
当你页面布局多个重复时，就可以使用Layout 来简化布局
//可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
layout/
--|default.vue
//或者新建一个自定义的布局
--|blog.vue
文件内容
<template>
<div>
<div>我的博客导航栏在这里</div>
<nuxt />
</div>
</template>然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>异步数据(@nuxt/axios)
获取异步数据之前，需要先安装和配置一下nuxt官方封装推荐的axios模块
安装
//yarn
yarn add @nuxtjs/axios
//npm
npm install @nuxtjs/axios然后将其添加到modules您的部分nuxt.config.js：
export default {
modules: ['@nuxtjs/axios']
}
axios: {
// 可以使用baseURL，但更推荐使用代理
// baseURL: 'http://localhost:4000',
// 开启代理
proxy: true,
//凭证
credentials: true,
},
proxy: {
//开启代理
"/api": {
target: "http://xxxx.com",
// 改变来源
changeOrigin: true,
// pathRewrite: {
// "^/htrc": "/htrc",
// }
},
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ['axios'],
},
// 经过这样配置过后就可以全局使用$axios了。开始调接口请求数据
asyncData 方法
asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。有两种调取数据的方法
1.使用 async 或 await
export default {
async asyncData({ params, $axios}) {
const { data } = await $axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}2.使用 回调函数
export default {
asyncData({ params ,$axios}, callback) {
$axios.get(`https://my-api/posts/${params.id}`).then(res => {
callback(null, { title: res.data.title })
})
}
}数据的展示
asyncData 方法返回的数据在融合 data 方法返回的数据后，一并返回给模板进行展示，如：
<template>
<h1>{{ title }}</h1>
</template>插件
在使用nuxt的过程中，我们常常需要使用一些第三方功能模块，下面使用最常用的“饿了么UI”做个演示。
//在plugins文件夹下创建第三方配置
plugins/
--| elment-ui.js
elment-ui.js 文件配置
import Vue from 'vue'
import Element from 'element-ui'
//是不是感觉缺了什么？ 对，css文件，这里先卖个关子。
Vue.use(Element)//是不是与我们常规在vue里面的配置很接近？所以有时候第三方模块官方没有写配置说明我们也能推断出怎么配置。配置好了，接下来就要去nuxt.config.js 里面注册。
css: [
'@/assets/style/main.css', //这是全局默认样式
'element-ui/lib/theme-chalk/index.css', //look，css文件出现了！！！
],
plugins: [
// src代表文件地址，ssr表示是否开启服务端渲染
{
src:'@/plugins/element-ui',
ssr:'true'
}，
// 或者你不要ssr渲染也可以直接这么写
'@/plugins/element-ui',
],
