Nuxt.js实用说明

时间：2021-09-01 来源：互联网编辑：宝哥软件园浏览：次

一、为什么选择Nuxt.js

大部分是基于webpack的项目，编译后的html文件和资源文件打包在js中，如下图404所示。从代码中可以看出，这样的页面不利于SEO(Search Engine Optimization)，内容到内容的时间(或者第一屏的渲染时间)还有很大的优化空间。为了解决上述问题，引入了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。此项目中使用了快速模板。

Vue init nuxt-community/starter-template项目名称Vue init nuxt-community/KOA-template项目名称Vue init nuxt-community/express-template项目名称2。发展

1)目录结构

-assets资源目录，未编译的static资源如少，js -components组件目录-layouts布局目录-mock模拟数据-node _ modules -pages页面目录-index.vue .

Nuxt.js的默认配置涵盖了大多数用例，可以通过修改nuxt.config.js来覆盖

//nuxt.config.js文件配置const path=require(' path ')module . exports={//page head : { title 3360 '默认共享标题'，meta :[{ charset : ' utf-8 ' }，{ 'http-equiv': 'pragma '，content: 'no-cache' }，{ ' http-equiv ' : ' cache-control '，content: 'no/assets/js/flexible _ nuxt ')，type:' text/JavaScript '，charset:' utf-8'}]。//不要转义脚本标记_ _ dangerouslydisableanizizer s 3360[' script ']}、//globalscssc :[' ~/assets/CSS/reset . CSS '、' ~/assets/CSS/main.less']、//Global env env: { __ENV:进程. env.__ENV }、build : { vendor :[' axios ']、postss :[require(' postscs(js | vue) $/，loader : ' eslit-loader '，exclude 3360/(node _ modules)/})//添加别名配置对象. assign (config.resolve.alias，{'utils' :路径。resolve(_ dirname，' utils')})})，plugins 3360[{ src : ' ~ plugins/toast '，ssr: false}，{src:' ~ plugins/dialog '

Nuxt.js通过vue-meta实现头标签管理，nuxt.config.js中的头配置所有页面都会遵循这个配置。如果要修改页面标题，可以在pages/**)下添加以下配置。vue文件。这时页面的标题会变成“收车费”，其他页面保持不变。

在配置头配置中，_ _ dangerouslydisablesanitizers :[' script ']主要是为了不转义script标记中的内容。请看下面的例子：

head: { title: 'myTitle '，meta :[{ charset : ' utf-8 ' }，{ 'http-equiv': 'pragma '，content: 'no-cache' }，{ ' http-equiv ' : ' cache-control '，content: 'no-cache' }，{ 'http-equiv': 'expires '，content: ' 0 '

复制代码如下： scriptdata-n-head=' true ' type=' text/JavaScript ' charset=' utf-8 ' console . log(' hello ')/script

我们发现vue-meta转义了引号，加上_ _ dangerouslydisableanizers 3360[' script ']后，这些字符不会被转义，所以这个字段要谨慎使用！

3)路由

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

假设页面的目录结构如下：

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

嵌套路由：

要创建嵌入的子路径，需要添加一个Vue文件和一个与该文件同名的目录来存储子视图组件。向父Vue文件添加nuxt-child/以显示子视图内容。

4)布局

Nuxt.js的布局如下图所示：

Layouts对应目录中的layouts文件夹，默认页面都在layouts/default.vue的布局中，如下图所示。其中nuxt/可以类似于vue中的slot的概念，以及pages/**中的内容。vue将插入nuxt/。

此外，如果您想要某个页面并且不遵循默认布局模式，您可以在vue文件中配置布局，如下所示。

scriptexport默认{ layout: 'demo_layout '，}/script5)vuex

当在根目录中创建存储目录时，默认情况下会引用vuex模块。此外，执行以下操作：1)将vuex模块添加到供应商的构建配置中；2)设置Vue根实例的存储配置项。

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

常见模式：store/index.js返回一个Vuex。存储实例模块模式：每。store目录中的js文件会被转换成状态树命名的子模块(当然，index是根模块，相当于将namespaced:设置为true)Nuxt.js提供了一种简单的模块化编写方式：store/index.js不需要返回Vuex。存储实例，但可以直接公开状态、变体和操作。例子如下：

导出常量状态=()=({accesstoken :''})导出常量变量={setaccesstoken (state，accesstoken) {state。accesstoken=accesstoken}} 6)异步数据asyncData

Nuxt.js增加了一个asyncData方法，可以在设置组件数据之前异步获取或处理数据。AsyncData是在组件初始化之前调用的，所以不能通过这个引用组件的实例对象，可以用上下文对象实现一些功能，也可以引用上下文api

示例：

async data(params){ let access token=params.route.query.accesstoken//request基于axios封装函数return request({ URL 3360 '/drivers/bank '，method: 'get '，headers: { accesstoken } })。然后(RES={ let { bank info }=RES . data return { bank sdata : bank info，Access token}})。catch(err={ return error({ message : ' access token not found '，statuscode 3360 404 })}上述代码将在组件初始化之前请求“/drivers/banks”接口，接口返回的数据将合并到数据中并返回到模板中显示。在浏览器中，使用Vue DevTools可以清晰地查看banksdata，访问令牌都在数据中。调试过程中发现，刷新页面时请求是在服务器端发送的，其他页面回滚到页面时请求是在客户端发送的。

7) FeTH法

与asyncData方法类似，不同之处在于它不设置组件的数据，而是设置存储数据。