这篇文章将为大家详细讲解有关使用Nuxt。js怎么实现一个SSR前端博客,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>目录结构
,资产:资源文件。用于组织未编译的静态资源少如,SASS或JavaScript。
<李>组件:组件。
<李>布局:页面:模板页面,默认为违约。vue可以在这个目录下创建全局页面的统一布的局,或是错误处理页面页,需要提供一个nuxt标签,类似于router-view
<李>中间件:中间件,放置自定义的中间件,会在加载组件之前调用。可以在页面中调用:中间件:& # 39;中间件名称& # 39;。
<李>页面:页面,指数。vue为根页面,Nuxt。js框架读取该目录下所有的.vue文件并自动生成对应的路由配置,如需要动态参数id,则可以添加_id的文件,必须是下划线加参数名。
<李>插件:插件,用于组织那些需要在根Vue。js应用实例化之前需要运行Javascript的插件。
<李>静态:静态文件,静态文件目录静态用于存放应用的静态文件,此类文件不会被Nuxt。js调用Webpack进行构建编译处理。
<李>存储:用于组织vuex状态管理。具体使用请移步至官网。
<李>nuxt.config。js: nuxt.config.js文件用于组织Nuxt。js应用的个性化配置,配置头、加载、css、插件等。
<强> Nuxt。js生命周期
<人物> 
1。传入请求浏览器发出的请求)
2。nuxtServerInit服务端接受请求后,要检查当前有没有nuxtServerInit配置项,如果有就执行这个函数
3。商店用行动来操作vuex
4。中间件可以做jWT等一些操作。
5。validate()检验参数,参数检验失败,可以在布局里的错误里面进行捕捉。
6。asyncData (),fetch () asyncData用来渲染组件,获取用来渲染vuex
7。呈现
Nuxt扩展以后的生命周期和方法以下:
注意:
Vue.js生命周期的钩子只有beforeCreate和创建会在服务端和客户端渲染。
<李>以上生命周期里都获取不到窗口对象。
<李>asyncData和取回我们可以拿到数据,不要尝试挂载数据到数据上,此时获取不到这对象。
<强>开发总结
如何修改默认启动端口?
可以在包中。json下面修改配置,如下。
<>强如何添加全局的样式?
可以在资产里添加全局Css文件,如在资产下的Css文件夹目录下添加了一个index.css文件,然后在nuxt-config。js里配置该css文件路径即可。css:[& # 39; ~高级/css/index.css& # 39;]
通过别名访问图片在模板里是正确的,为何在css设置背景图却报错?
在css配置的是,需要将& # 39;~/& # 39;后面的& # 39;/& # 39;去除掉。
<>强如何添加路由动画?
同样,我们在Css文件里添加一些动画代码,一般样式会在其后面添加活跃和-leave-active,其实和Vue动画形式一致。其中以开页头的动画,默认会作用于全部页面,如果想给特定的页面加动画,可以在对应的页面脚本里引用,如转换:& # 39;反弹# 39;即可。
