nuxt.js 简述

JavaScript029

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框架

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

+静态应用部署

还不了解vue为什么不被百度收录或预渲染怎么使用的童鞋们建议点下面链接了解下

vue项目不被百度收录怎么办、seo优化问题/预渲染的具体使用

Nuxt.js介绍、Nuxt.js 是什么?:

Nuxt.js安装

确保安装了npx(npx在NPM版本5.2.0默认安装了):

或者用yarn :

然后会让你进行一些安装的选择,这里就简单说下(UI框架没有就选none就行了,Eslint检测本人是非常不习惯用的所以我一般都不选,其他的没什么说的)

当运行完时,它将安装所有依赖项,因此下一步是启动项目:

应用现在运行在 http://localhost:3000 上运行。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_ 和 ~/static/your_方式。

说下路由配置问题:

总结

每个框架都有他自己对应的ssr方案,今天这里提到了vue的,有心的童鞋可以自行查阅其他框架方面的

再说几点关于seo方面的小技巧

end~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!

文章对您有所帮助请给作者点个赞支持下,谢谢~