安装nuxt_一天上手Nuxt基于vue服务端渲染

Nuxt.js团队创建了脚手架工具create-nuxt-app。傻瓜式安装就可以

下面会列举一下开发中的盲点。

目录结构

布局layout

layout中default.vue文件加入以下代码当然写法有很多，根据自己喜欢的来。

template><div><header>头部</header><main><content><nuxt/><content><right>123        </right><main><footer></footer></div>
</template>

添加error.vue页面引导错误404页面。

<template><div class="container"><div v-if="error.statusCode === 404" class="page"><a-row type="flex" justify="space-between"><a-col :xs="16" :sm="16" :md="8" :lg="8" :xl="8" :order="1"><div><h1 class=""><b>哎 呀！</b></h1><h2 class=""><b>页面找不到了！！</b></h2><div class="color1890ff font60">404！！！</div></div></a-col><a-col :xs="16" :sm="16" :md="8" :lg="8" :xl="8" :order="2"><div><imgsrc="~/static/404.png"width="240"/></div></a-col></a-row></div></div>
</template><script>
export default {props: ["error"],layout: "blog",
};
</script>

2.监听页面间参数query

Nuxt页面渲染的数据需要在asyncData方法中，asyncData局限于pages下的页面组件，components中无效，由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过this来引用组件的实例对象所以你需要这么写

  async asyncData({ $axios, query }) {try {const res = await $axios.get("web/mine");return {data: res.data,};} catch (err) {error({ statusCode: 404 });}},

3.监听页面间参数query

watchQuery方法监听页面间传递参数，id改变的同时会出触发asyncData方法，渲染页面

eg：http://localhost:8083/mine?id=123

watchQuery数组内部添加想要监听的参数就可以了

watchQuery: ["id"],

4.如何引入第三方js，css类库等

vue一般情况下引入在main.js即可，nuxt可添加在nuxt.config.js中

  css: ['reset-css/reset.css',//不怎么好用啊'ant-design-vue/dist/antd.less','~/plugins/prism.css','~/assets/lbScss/lb.scss',],plugins: ['@/plugins/antd-ui','@/plugins/axios','@/plugins/prism','@/plugins/filter','@/plugins/mixin',],

vue没用问题的小伙伴nuxt上手是非常快的，nuxt更利于seo优化，有问题的小伙伴下方留言吧

文章转自YBlog

Yblogwww.samefamily.cn

安装nuxt_一天上手Nuxt基于vue服务端渲染相关推荐

Vue 服务端渲染（SSR）、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
vue服务端渲染——基础
文章目录 vue服务端渲染(基础) Nuxt框架文件目录结构项目启动.打包生命周期 SSR nuxtserverInit middleware 中间件全局中间件页面级中间件 validate ...
egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
java vue 服务端渲染_vue ssr服务端渲染小白解惑
vue ssr服务端渲染小白解惑 >初学ssr入坑初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...
vue服务端渲染 MySQL_Vue 服务端渲染
关于 vue 做服务端渲染,目前主要有俩种解决方案,使用 vue-server-renderer 或者使用 nuxt .但个人感觉使用 nuxt 写法太死,以及即使你用 nuxt 写出了 vue ss ...
手把手教你 Vue 服务端渲染
写在前面在写这篇文章之前,我有写一篇 Vue 预渲染的教程以及在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
Vue 服务端渲染预渲染
文章目录简介那么什么是服务端渲染为什么使用服务端渲染服务端渲染 or 预渲染区别如何使用预渲染如何搭建一个预渲染开发环境 Tip 写在最后简介关于 Vue 的 SPA 说的已经太多 ...
Vue 服务端渲染原理拆分成三步个步骤简单的实现一个案例
前言可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用服务端渲染搭建项目比较少,本文是记录我在学习服务端渲染过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
vue服务端渲染之nuxtjs
前言本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同客户端 ...
vue服务端渲染 MySQL_vue服务端渲染简单入门实例
想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...

安装nuxt_一天上手Nuxt基于vue服务端渲染

安装nuxt_一天上手Nuxt基于vue服务端渲染相关推荐

最新文章

热门文章