本篇文章主要介绍了详解 Nuxt.JS vue 服务端渲染摸索, 写的十分的全面细致, 具有一定的参考价值, 对此有需要的朋友可以参考学习下. 如有不足之处, 欢迎批评指正.
Nuxt.JS 十分简单易用. 一个简单的项目只需将 nuxt 添加为依赖组件即可.
Vue 因其简单易懂的 API, 高效的数据绑定和灵活的组件系统, 受到很多前端开发人员的青睐. 国内很多公司都在使用 vue 进行项目开发, 我们正在使用的简书, 便是基于 Vue 来构建的.
我们知道, SPA 前端渲染存在两大痛点:(1)SEO. 搜索引擎爬虫难以抓取客户端渲染的页面 meta 信息和其他 SEO 相关信息, 使网站无法在搜索引擎中被用户搜索到.(2) 用户体验. 大型 webApp 打包之后的 JS 会很庞大, 于是就有了按模块加载, 像 require.JS 一样, 异步请求. webpack 盛行, 就变成了代码分割. 即便如此, 受制于用户设备, 页面初次渲染还是有可能很慢, 白屏等待时间太长, 对日益挑剔的用户群体来说, 无法接受.
因此, 对于那些展示宣传型页面, 如官网, 必须进行服务端渲染 (SSR). 安装 nuxt.JS
$ vue init nuxt-community/starter-template < 你项目的名字 >
- // 后面 安装依赖你懂的
- // 安装 koa 版本
$ vue init nuxt/koa < 你的项目名字 >
运行
NPM run dev
应用现在运行在 http://localhost:3000/
注意: Nuxt.JS 会监听 pages 目录中的文件变更并自动重启, 当添加新页面时没有必要手工重启应用.
路由
nuxt 是根据 pages 目录结构生成路由配置
异步数据 asyncData
注意必须要页面组件才能调用 asyncData(就是 components 下是不能调用, 必须路由的页面才行)
异步数据 beforeCreate,created
注意: 在任何 vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个钩子会在浏览器端和服务端均被调用; 其他的钩子都只会在浏览器端调用.
使用插件 mint-ui
首先我们需要在 plugins 文件夹中添加插件文件 mint-ui.JS
- import Vue from "vue";
- import Mint from "mint-ui";
- // 欢迎加入前端全栈开发交流圈一起学习交流: 864305860
- Vue.use(Mint);
在 nuxt.config.JS 中配置 plugins 字段
- /**
- * 配置第三方插件
- */
- plugins: [{ src: "~plugins/mint-ui", ssr: true }],
- // 欢迎加入前端全栈开发交流圈一起学习交流: 864305860
- // 同时 nuxt 还支持区分只在浏览器中运行和只在服务端运行的插件
- // 只在浏览器运行: 配置 nuxt.config.JS 中 plugins 字段, 将引入的插件属性设置为 ssr: false
- // 只在服务端运行: 直接在 webpack 打包 server.bundle.JS 文件中, 将 process.SERVER_BUILD 设置为 true 即可
layout 布局
1.nuxt.JS 实现了一个新的概念, layout 布局, 我们可以通过 layout 布 局方便的实现页面的多个布局之间方便的切换. 本项目中实现了三种常用的布局, 即: 1) 两栏布局, 左栏固定, 右栏动态宽度; 2, 错误页提示, 页面中间一个提示框的布局方案; 3, 纯白页面布局.
具体开发的页面中, 如果使用默认布局, 则不需指定页面的布局, nuxt 框架会自动对没有指定布局的页面和 default 布局进行关联. 如果需要指定布局, 则在 layout 字段中对布局进行指定. 如图在 login 页面中对 full 布局进行了指定.
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/5f86d272c4aa9ac258899f2e55f1c581.html