Nuxt.js 是一个基于 Vue.js 的通用应用框架。
- Nuxt支持vue的所有功能，此类内容为前端客户端内容。
- Nuxt特有的内容，都是前端服务端内容。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

2，入门案例

2.1：create-nuxt-app介绍

Nuxt.js 提供了脚手架工具 create-nuxt-app
create-nuxt-app 需要使用 npx
npx 命令为 NPM版本5.2.0默认安装组件

2.2：安装

npx create-nuxt-app learn_nuxt

2.3：启动

npm run dev

nuxtjs改善

2.4：访问

2.5：注意

安装时：以管理员方式运行vs，不然在安装过程中会显示没有权限错误ERROR

3，目录结构

3.1：目录

目录名称	描述
assets	资源目录，用于存放==需要编译==的静态资源。例如：LESS、SASS等默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件
components	vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts	布局组件目录
pages	页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins	插件目录
static	静态文件目录，==不需要编译==的文件
store	vuex目录
nuxt.config.js	nuxt个性化配置文件，内容将覆盖默认
package.json	项目配置文件

3.2：别名

assets 资源的引用：~ 或 @

<!-- assets 查看图片方式 @  或者 ~ -->
        <img src="@/assets/java.jpeg">
        <img src="~/assets/java.jpeg">
        <img src="~assets/java.jpeg">

static 目录资源的引用：/ 直接引用

<!-- static  查看图片方式 -->
        <img src="/java.jpeg">

4，路由

4.1：路由概述

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间切换路由，我们建议使用<nuxt-link> 标签。

标签名	描述
`<nuxt-link>`	nuxt.js中切换路由
`<Nuxt />`	nuxt.js的路由视图
`<router-link>`	vue默认切换路由
`<router-view/>`	vue默认路由视图

4.2：基础路由

自动生成基础路由规则

路径	组件位置及其名称	规则
/	pages/index.vue	默认文件 index.vue
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/user/one.vue	指定文件

实例

情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
  - 资源位置： ~/pages/user/one.vue
  - 访问路径：http://localhost:3000/user/one


情况2：每一个目录下，都有一个默认文件 index.vue
  - 资源位置： ~/pages/user/index.vue
  - 访问路径：http://localhost:3000/user

思考：/user 可以匹配几种文件？
- pages/user.vue 文件【优先级高】
- pages/user/index.vue 文件

4.3：动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。

路由中路径匹配	组件位置及其名称
/	pages/index.vue
/user/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_slug/comments.vue

实例1：获得id值，创建资源 user/_id.vue

实例；

4.4：动态命名路由

路径 /news/123 匹配_id.vue还是_name.vue ？

我们可以使用<nuxt-link>解决以上问题
- 通过name 确定组件名称：“xxx-yyy”
- 通过params 给对应的参数传递值

<!-- 导航 -->
  <nuxt-link to="/img/ShowImage">目录-别名</nuxt-link>|
  <nuxt-link :to="{name:'news-id',params:{id:'123'}}">动态命名路由-id</nuxt-link>
  <nuxt-link :to="{name:'news-name',params:{name:'san'}}">动态命名路由-name</nuxt-link>

4.5：默认路由

路径	组件位置及其名称
不匹配的路径	pages/_.vue

404页面，可以采用 _.vue进行处理

4.6：嵌套路由

创建嵌套子路由，你需要添加一个父组件Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

要求：父组件使用<nuxt-child/> 显示子视图内容

pages/
--| book/						//同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue					//父组件

步骤1：编写父组件 pages/child/book.vue

<template>
  <div>
      <nuxt-link to="/child/book/list">书籍列表</nuxt-link> |
      <nuxt-link to="/child/book/123">书籍详情</nuxt-link> |
      <hr>
      <nuxt-child />
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

步骤2：编写子组件 pages/child/book/list.vue

<template>
  <div>书籍列表</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

步骤3：编写子组件 pages/child/book/_id.vue

<template>
  <div>书籍详情{
   
   {$route.params.id}} </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

4.7：过渡动效

4.7.1：全局过渡动效设置

Nuxt.js 默认使用的过渡效果名称为 page
- .page-enter-active样式表示进入的过渡效果。
- .page-leave-active样式表示离开的过渡效果。
步骤1：创建 assets/main.css，编写如下内容：

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-active {
  opacity: 0;
}

步骤2：nuxt.config.js 引入main.css文件

module.exports = {
  css: [
    'assets/main.css'
  ]
}

4.7.2：自定义动画

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：
步骤1：在全局样式 assets/main.css 中添加名称为test的过渡效果

.test-enter-active, .test-leave-active {
  transition: all 2s;
  font-size:12px;
}
 .test-enter, .test-leave-active {
  opacity: 0;
  font-size:40px;
}

步骤2：需要使用特效的vue页面编写如下：

export default {
  transition: 'test'
}

Nuxt.js知识

1，Nuxt.js概述

1.1：学习过的SPA

1.2：什么是SEO

1.3：什么是SSR技术

1.4：SPA和SSR对比

1.5：什么是Nuxt.js