Vue Nuxt.js 概述

1. Nuxt.js 概述

1.1 我们一起做过的SPA

• SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。
• 我们之前学习的Vue就是SPA中的佼佼者。
• SPA 应用广泛用于对SEO要求不高的场景中

1.2 什么是SEO

• SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。
• 非常明显，SPA程序不利于SEO

• SEO解决方案：提前将页面和数据进行整合
  • 前端：采用SSR
  • 后端：页面静态化 （freemarker 、thymeleaf、velocity）

1.3 什么是SSR技术

• 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。
  • 在SSR中，前端分成2部分：前端客户端、前端服务端
  • 前端服务端，用于发送ajax，获得数据
  • 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）

• 如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

1.4 SPA和SSR对比

	SPA单页应用程序	SSR服务器端渲染
优势	1.页面内容在客户端渲染2. 只关注View层，与后台耦合度低，前后端分离3.减轻后台渲染画面的压力	1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面
劣势	1.首屏加载缓慢2.SEO(搜索引擎优化)不友好	1.更多的服务器端负载2.涉及构建设置和部署的更多要求，需要用Node.js渲染3.开发条件有限制，一些生命周期将失效4.一些常用的浏览器API无法使用

1.5 什么是Nuxt.js

• Nuxt.js 是一个基于 Vue.js 的通用应用框架。
• 通过对客户端/服务端基础架构的抽象组织，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 安装

代码语言：javascript复制

npx create-nuxt-app 

• 例如

代码语言：javascript复制

npx create-nuxt-app demo_nuxt02

• nuxtjs改善

2.3 启动

代码语言：javascript复制

npm run dev

2.4 访问

代码语言：javascript复制

http://localhost:3000

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 别名

4 路由

4.1 路由概述

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

标签名	描述
	nuxt.js中切换路由
	nuxt.js的路由视图
	vue默认切换路由
	vue默认路由视图

4.2 基础路由

• 自动生成基础路由规则

路径	组件位置及其名称	规则
/	pages/index.vue	默认文件 index.vue
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/user/one.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

代码语言：javascript复制

export default {
  transition: 'test',
  mounted() {
    console.info(this.$route)
  },
}

4.4 动态命名路由

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

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

代码语言：javascript复制

第2新闻
第3新闻

4.5 默认路由

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

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

4.6 嵌套路由(了解)

4.7 过渡动效（了解）

4.7.1 全局过渡动效设置

4.7.1 自定义动画

4.8 案例：学生管理

• 需求1：首页

• 需求2：点击，学生管理

• 需求3：点击“添加”按钮

• 需求4：点击修改按钮

• 需求5：详情

5. 视图

5.1 默认模板（了解）

5.2 默认布局【掌握】

5.2.1 布局概述

• 布局：Nuxt.js根据布局，将不同的组件进行组合。
• 模板：html页面，是布局后所有组件挂载的基础。

5.2.2 布局分析

• layouts/default.vue 默认布局组件
  • 访问路径根据路由，确定执行组件
  • 组件具体显示的位置，有布局来确定

5.2.3 公共导航

• 修改 layouts/default.vue

代码语言：javascript复制

5.3 自定义布局

5.4 错误页面

• 编写layouts/error.vue页面，实现个性化错误页面

代码语言：javascript复制

export default {
  props: ['error']
}

• 解决问题： 404 、500、连接超时（服务器关闭）
• 总结：所学习的技术中，有2种方式处理错误页面
  • 方式1：默认路径，_.vue （先执行）
  • 方式2：错误页面，~/layouts/error.vue

5.5 Nuxt组件特殊配置

• 页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项

特殊配置项	描述
asyncData	SSR进行异步数据处理，也就是服务器端ajax操作区域。
fetch	在渲染页面之前获取数据填充应用的状态树（store）
head	配置当前页面的 Meta 标签
layout	指定当前页面使用的布局
transition	指定页面切换的过渡动效
scrollToTop	布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。

5.5.1 模板代码

代码语言：javascript复制

export default {
	//异步处理数据, 每次加载之前被调用
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },	
	//用于在渲染页面之前获取数据填充应用的状态树（store）
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
	//配置当前页面的 Meta 标签
  head: {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}



.red {
  color: red;
}

5.5.2 head

代码语言：javascript复制

export default {
  head: {
    title: '详情页',
    link: [
      {rel:'stylesheet',href:'/style/img.css'},....
    ],
    script: [
      { type: 'text/javascript', src: '/js/news.js' }
    ]
  }
}



  .bg2 {
    background-image: url('~static/img/2.jpg');
    width: 300px;
    height: 300px;
    background-size: 300px;
  }

6. ajax操作

6.1 整合 axios

6.1.1 默认整合

• 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合

6.1.2 手动整合（可选）

6.1.3 常见配置

6.2 使用axios发送ajax

6.3 使用asyncData发送 ajax

• asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。

6.3.1 发送一次请求

• 语法：

代码语言：javascript复制

export default {
	async asyncData( context ) {  //context就相当于其他地方的this
        //发送ajax
        let { data } = await context.$axios.get('路径','参数')
        // 返回结果
        return {变量: 查询结果从data获取 }
	},
}

6.3.2 发送多次请求

代码语言：javascript复制

export default {
  async asyncData(context) {
    // 发送ajax
    let [{data:echo}, {data:echo2}] = 
                await Promise.all([
                    context.$axios.get('/service-consumer/feign/echo/abc'),
                    context.$axios.get('/service-consumer/client/echo/abc')
                ])

    // 返回数据
    return {
      echo,
      echo2
    }
  },
}

6.4 使用fetch发送 ajax

• fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

6.5 插件：自定义axios

6.5.1 客户端

6.5.2 服务端

6.5.3 插件配置总结

代码语言：javascript复制

//方式1：通过src设置文件，通过mode设置模式
plugins: [
	{ src: '~/plugins/apiclient.js', mode: 'client' },		//前端客户端
	{ src: '~/plugins/apiserver.js', mode: 'server' },		//前端服务端
    { src: '~/plugins/api.js' }								//前端客户端   前端服务端
]

//方式2：通过命名来确定模式
plugins: [
    '~/plugins/api.client.js',				//前端客户端
    '~/plugins/api.server.js',				//前端服务端
    '~/plugins/api.js',						//前端客户端   前端服务端
]

7. Vuex 状态树

7.1 根模块数据操作

7.2 其他模块数据操作

7.3 完整vuex模板

代码语言：javascript复制

// state为一个函数, 注意箭头函数写法
const state = () => ({
  user: 'jack'
})

// mutations为一个对象
const mutations = {
  setUser(state, value) {
    state.counter = value
  }
}
// action执行mutation
const actions = {
  userAction (context,value){
    // 可以发送ajax
    context.commit('setUser',value)
  }

}

// 获取数据
const getters = {
  getUser (state) {
    return state.user
  }
}
export default {
  namespace: true,	// 命名空间
  state,
  mutations,
  actions,
  getters
}

8. nuxt流程总结

9 综合练习

9.1 练习1：

9.2 练习2：

end

ajax seo javascript node.js vue.js

0 人点赞