第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框…

原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只是一个单纯的 <div id="app"></div>. Nuxt.js 就是一个极简的 vue 版的 ssr 框架.基于它,我们可以快速开发一个基于 vue 的 ssr 单页面应用. 安装 Nuxt.js 官方提供了一个模板,可以使用 vue-cli 直接安装.…

初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端框架之间进行选择: 选择您喜欢的 UI 框架: 选择您喜欢的测试框架: 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中. 添加 EsLint 以在保存时代码规范和错误检查您的代码. 添加 Prettier 以在…

[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LESS.SASS 或 JavaScript |-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件 |-- layouts // 布局目录,用于组织应用的布局组件,不可更改. |-- middleware // 用于存放中间件 |-- pages // 用于存放…

原文地址:https://www.jianshu.com/p/5df089d360e4 本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法. 了解下Route和Navigator 简单的路由 命名路由 自定义路由 Flutter中使用的路由场景 Flutter中的路由栈管理 实战 代码链接 下一步 了解下Route和Navigator 在Flutter中,我们需要在不同屏幕或者页面之间进行切换和发送数据,这些“screens”或者“pages”被称为Route(路由…

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>…

nuxt.js中如果在同级目录中建两个_xxxx.vue的动态路由文件,那么页面跳转始终是跳的一个页面,如何解决这个问题呢?下面举个栗子: 第一步:新建两个页面文件 第二步:在nuxt.config.js文件中配置两个页面的动态路由 router: { extendRoutes(routes, resolve) { routes.push( { name: "pageA", path: "/strA-:id", component: resolve(__dirnam…

watch: { '$route'(to, from) { if (to.fullPath !== from.fullPath) { this.$nextTick(() => { // 不加this.$nextTick时,路由跳转后还是上一次的数据,所以需要加上 this.myfunction() // 需要执行的方法 }) } } }, 同路由跳转,参数不同,mounted不执行是因为页面没有销毁,所以不会执行当参数变化时,可以监听路由变化,来做一些事情 来源:https://www.jian…

路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染,提升切换性能. 相关的生命周期 created() { console.log('created') }, activated() { console.log('activated') }, deactivated() { console.log('deactivated') },…

最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在其中尽显无遗. 说说自己对Backbone优缺点的看法. Backbone确实是优秀的单页MVC框架,Events自定义事件机制,为Model/View/Colllection提供基础模块通信,Aync模块封装了CRUD的ajax操作,Router/History为开发者提供了路由机制,从很大程度上…