nuxt.js 简述

JavaScript05

nuxt.js 简述,第1张

vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于

id为app的DOM元素上，这样会存在两大问题。

除此之外，nuxt与vue还有一些其他方面的区别。

下图为关于nuxt的简单概述

vue文件中可直接使用

sass文件如需解析，nuxt.config.js中配置css属性

封装axios，解决每个请求前加baseURL

plugins/axios.js

index.vue

为避免每个页面都引入moment，执行 moment.locale('zh-cn') ，可将其定义为全局方法

icon.png文件存放在static文件夹下，nuxt.config.js中配置head属性

中间件存放于middleware文件夹下，按使用场景可分为全局中间件和单页面中间件

中间件执行流程顺序：

nuxt.config.js ->匹配布局 ->匹配页面

按照index.vue通过 require('mini-toastr') 引入miniToastr，运行程序报错如下

打印miniToastr发现为一Module对象，init挂载在其default属性上

所以修改引入方法为

为什么需要require().default

关于如上介绍，测试关于两种模块的导出方法

方式一：export default

新建test.js文件

vue页面导入

此时 require('~/plugins/con.js') 打印为

方式二：module.exports

此时 require('~/plugins/con.js') 打印为

对应路由地址为

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

以下目录结构：

Nuxt.js 生成对应的路由配置表为：

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

举个例子： pages/users/_id.vue

如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面

类似于vue路由导航功能

提示: 别忘了在布局文件中添加 <nuxt/>组件用于显示页面的主体内容。

默认布局的源码如下：

假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

可以用于弹窗/加载态....

注入

使用

诸如一些登录,退出或者一些api请求方法可以使用此方法注入,更加简洁优雅,或者嵌套组件使用方便数据传递

此配置需要在nuxt.config.js 配置

store/index.js

神策分析，是针对企业级客户推出的深度用户行为分析产品，支持私有化部署，客户端、服务器、业务数据、第三方数据的全端采集和建模，驱动营销渠道效果评估、用户精细化运营改进、产品功能及用户体验优化、老板看板辅助管理决策、产品个性化推荐改造、用户标签体系构建等应用场景。作为 PaaS 平台支持二次开发，可通过 BI、大数据平台、CRM、ERP 等内部 IT 系统，构建用户数据体系，让用户行为数据发挥深远的价值。

简而言之,就是对用户行为进行数据分析

用于cookie 的设置

css框架

判断当前环境是否为移动端

+静态应用部署