Nuxt.js实战详解

这篇文章主要介绍了Nuxt.js实战详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、为什么选择Nuxt.js

多数是基于webpack构建的项目，编译出来的html文件，资源文件都被打包到js中，以下图404页面代码为例。从代码中可以看出，这样的页面是不利于搜索引擎优化(SEO, Search Engine Optimization) ，并且内容到达时间(time-to-content) （或称之为首屏渲染时长）也有很大的优化空间。为了解决以上问题，引入了 Nuxt.js 框架。

vue官网对于Nuxt.js也是很推荐的，除此之外，Nuxt.js的开发者积极活跃，版本迭代迅速。经过一系列rc版本后，终于在1月9日发布了 v1.0.0 正式版本！

图1. 使用webpack构建的HTML（代码已格式化）

图2. 使用 Nuxt.js 构建的HTML（代码已格式化）

二、Nuxt.js 简介

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它预设了利用 Vue.js 开发服务端渲染（SSR, Server Side Render）的应用所需要的各种配置，同时也可以一键生成静态站点。

作为框架，Nuxt.js 为客户端/服务端这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。区别于其他 vue SSR 框架，Nuxt.js 有以下比较明显的特性。

自动代码分层
强大的路由功能，支持异步数据（路由无需额外配置）
HTML头部标签管理（依赖 vue-meta 实现）
内置 webpack 配置，无需额外配置

三、项目实战1、项目创建

官方提供了基于 vue-cli 脚手架工具，常用的有如下三个，更多脚手架工具可以查看nuxt-community 。本项目使用的是 express-template。

 vue init nuxt-community/starter-template  vue init nuxt-community/koa-template  vue init nuxt-community/express-template

2、开发

1）目录结构

 ├─assets   资源目录，未编译的静态资源如less、js ├─components  组件目录 ├─layouts  布局目录 ├─mock   mock数据 ├─node_modules ├─pages   页面目录 ├─index.vue ├─.... ├─plugins  插件 ├─server   express服务 ├─static   静态文件目录 ├─store   vuex store ├─utils   工具方法

2）配置

Nuxt.js 默认的配置涵盖了大部分使用情形，也可通过修改 nuxt.config.js 来覆盖默认配置。

 // nuxt.config.js 文件配置 const path = require('path') module.exports = { // Headers of the page head: { title: '默认共用title', meta: [ { charset: 'utf-8' }, { 'http-equiv': 'pragma', content: 'no-cache' }, { 'http-equiv': 'cache-control', content: 'no-cache' }, { 'http-equiv': 'expires', content: '0' }, { content: 'telephone=no', name: 'format-detection' } ], // html head 中创建 script 标签 script: [ { innerHTML: require('./assets/js/flexible_nuxt'), type: 'text/javascript', charset: 'utf-8'} ], // 不对

我们发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了，该字段使用需慎重！

3）路由

Nuxt.js 依据 pages 目录结构，自动生成 vue-router 模块的路由配置。

假设 pages 的目录结构如下：

那么，Nuxt.js 自动生成的路由配置如下：

嵌套路由：

创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。在父级 Vue 文件内增加用于显示子视图内容。

4）布局

Nuxt.js布局方式如下图所示：

layouts对应目录中的layouts文件夹，默认pages下的页面走的都是 layouts/default.vue 布局方式，如下图。其中可以类似vue中slot插槽的概念，pages/**.vue中的内容会插在内。

此外，如果想要某一页面，不走默认布局方式，可以在vue文件中配置layouts，如下。

5）vuex

在根目录创建 store 目录，就会默认引用 vuex 模块，除此之外，还进行了以下的操作：1）将 vuex 模块加到 vendors 构建配置中去；2）设置 Vue 根实例的 store 配置项。

Nuxt.js 支持两种使用 store 的方式：

普通方式：store/index.js 返回一个 Vuex.Store 实例
模块方式：store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块（当然，index 是根模块，相当于设置了namespaced: true)

Nuxt.js提供了模块方式的简单写法：使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，直接将 state、mutations 和 actions 暴露出来即可。示例如下：

 export const state = () => ({ accesstoken: '' }) export const mutations = { setAccesstoken (state, accesstoken) { state.accesstoken = accesstoken } }

6）异步数据 asyncData

Nuxt.js 增加了一个 asyncData 方法，用于在设置组件数据之前能够异步获取或处理数据。
由于 asyncData 是在组件初始化之前被调用的，所以不能通过 this 引用组件的实例对象，可以使用上下文对象来实现某些功能，可参考 context api

示例

以上就是Nuxt.js实战详解的详细内容，更多请关注0133技术站其它相关文章！