浅谈前端nuxt(ssr)
SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。
一、那为什么要使用SSR呢?
我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间,解决SPA不利于SEO(Search Engine Optimization)的优化。
那Nuxt是什么呢?跟SSR有什么关系呢?
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。
除此之外,我们还提供了一种命令叫:nuxt generate,为基于 Vue.js 的应用提供生成对应的静态站点的功能。
我们相信这个命令所提供的功能,是向开发集成各种微服务(microservices)的 Web 应用迈开的新一步。
作为框架,Nuxt.js 为 客户端/服务端
这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。
Nuxt.js是受到了React SSR框架Next.js的启发,使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架。
二、nuxt.js的优势
4)中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
三、开始Nuxt项目的搭建
1.首先根据官方网站教程创建一个项目。
为了快速入门,Nuxt.js团队创建了脚手架工具 create-nuxt-app。
确保安装了npx(npx在NPM版本5.2.0默认安装了):
$ npx create-nuxt-app <项目名>
或者用yarn :
$ yarn create nuxt-app <项目名>
它会让你进行一些选择:
- 在集成的服务器端框架之间进行选择:
- 选择您喜欢的UI框架:
- None (无)
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- 选择你想要的Nuxt模式 (
Universal
orSPA
) - 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
- 添加 EsLint 以在保存时代码规范和错误检查您的代码。
- 添加 Prettier 以在保存时格式化/美化您的代码。
当运行完时,它将安装所有依赖项,因此下一步是启动项目:
$ npm run dev
应用现在运行在 http://localhost:3000 上运行。
2.引入axios,封装axios和请求api(使用的easy-mock请求模拟数据)
1) 安装依赖:npm i axios -S
2) 新建一个文件夹service,存放axios及api相关文件。
3)service目录下新建index.js(封装axios)
/** * Created by yuchen on 2019/2/20. */ import axios from 'axios' import qs from 'qs' import config from './config' import {API, API_URL} from './api' if (process.server){ config.baseURL = `http://${process.env.HOST || 'localhost'} : ${process.env.PORT || 3000}` } const service = axios.create(config) // POST 传参序列化 service.interceptors.request.use( config => { if (config.method === 'post') config.data = qs.stringfy(config.data) return config }, error => { return Promise.reject(error) } ) // 返回结果处理 service.interceptors.response.use( res => { return res.data }, error => { return Promise.reject(error) } ) const get = (url) => { let temp = API[url] let URL = `${API_URL}${temp}` return service({ method: 'get', url:URL }) } const post = (url, params, showLoading) => { let temp = API[url] let URL = `${API_URL}${temp}` axios.post(URL, params, { showLoading: showLoading }) } export default { get }
4) 新建config.js自定义配置
/** * Created by yuchen on 2019/2/20. */ import http from 'http' import https from 'https' export default { // 自定义的请求头 headers: { post: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, 'X-Requested-With': 'XMLHttpRequest' }, // 超时设置 timeout: 10000, // 跨域是否带Token withCredentials: true, // 响应的数据格式 json / blob /document /arraybuffer / text / stream responseType: 'json', // 用于node.js httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }) }
5) 新建api.js存放相关请求api(easy-mock模拟)
/** * Created by yuchen on 2019/2/25. */ let API_URL = 'https://easy-mock.com/mock' const API = { 'mockTest':'/5c7387403b7ff2219057c6bb/example/mock' } export { API_URL, API }
6) 在plugins下新建http.js(挂载$http到vue上)
/** * Created by yuchen on 2019/2/25. */ import Vue from 'vue' import http from '~/service/index' Vue.prototype.$http = http Vue.use(http)
7) 在nuxt.config.js下引入插件plugins下的http.js
/** * Created by yuchen on 2019/2/25. */ import Vue from 'vue' import http from '~/service/index' Vue.prototype.$http = http Vue.use(http)
3.跨域处理
使用过 vue
的同学,肯定知道对于项目中的跨域,vue-cli
对 webpack
中的 proxy
选项进行了一层封装。它暴露出来的是一个叫 proxyTable
的选项,是对 webpack
中的 proxy
和其三方插件 http-proxy-middleware
的一个整合。
不幸的 Nuxt
中没有 proxyTable
这么一个配置项来进行跨域的配置。当然幸运的是,在 Nuxt
中你可以直接通过配置 http-proxy-middleware
来处理跨域。更幸运的是 Nuxt
官方提供了两个包来处理 axios
跨域问题。
首先,进行安装
npm i @nuxtjs/axios @nuxtjs/proxy -D
然后在 nuxt.config.js
文件里进行配置
modules: [ '@nuxtjs/axios' ], axios: { proxy: true }, proxy: { '/api': { target: 'xxx.target.com', pathRewrite: { '^/api': '' } } }
4.同理引入第三方插件element-ui
在plugins下新建element-ui.js(可全局和按需引用),然后在nuxt.config.js引入
/** * Created by yuchen on 2019/2/20. */ import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) // import { Radio } from 'element-ui' // Vue.component(Radio.name, Radio )
5.官方教程引入css预处理器less
styleResources
- 类型:
Object
- 默认:
{}
当您需要在页面中注入一些变量和mixin
而不必每次都导入它们时,这非常有用。
Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 来实现这种行为。
您需要为css预处理器指定要包含的 模式 / 路径 : less
, sass
, scss
或 stylus
您不能在此处使用路径别名(~
和 @
),
:warning: You cannot use path aliases here (~
and @
),你需要使用相对或绝对路径。
安装 style-resources:
$ yarn add @nuxtjs/style-resources
根据需要安装:
- SASS:
$ yarn add sass-loader node-sass
- LESS:
$ yarn add less-loader less
- Stylus:
$ yarn add stylus-loader stylus
如果使用的npm,则变为npm install less-loader less
修改 nuxt.config.js
:
modules: [ '@nuxtjs/style-resources' ], styleResources:{ less:'./assets/common.less' }
四、项目地址及Demo展示
此nuxt项目在脚手架新建的基础上增加了axios,elemet-ui,less,跨域处理,路由nuxt会帮你创建对应的路由,你只需要在page创建对应层级文件。
项目地址传送门:nuxt-ssr
浅谈前端nuxt(ssr)的更多相关文章
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- 浅谈前端中的mvvm与mvc
用了vue这么久,却没有认真的关注mvvm与mvc,着实汗颜.趁着周末刚好看了一下网上的文章还有书籍,简单的谈一下我的理解. -以下图片均摘自网络. 一.MVC 特点:单项通讯 视图(View):用户 ...
- 浅谈前端与SEO
转载地址: https://blog.csdn.net/lzm18064126848/article/details/53385274?tdsourcetag=s_pctim_aiomsg SEO(S ...
- JS基础——浅谈前端页面渲染和性能优化
加载html中的静态资源 其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到.处理并返回http请求,浏览器得到返回http请求 ...
- 浅谈前端性能优化(二)——对HTTP传输进行压缩
1.前端性能优化的一点: 对js.css.图片等进行压缩,尽可能减小文件的大小,减少文件下载的时间,从而减少网页响应的时间. 2.前端性能优化的另一点: 对HTTP传输进行压缩,即在js,css.图片 ...
- 浅谈前端性能优化(PC版)
前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能.面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多 ...
- 浅谈前端常用脚手架cli工具及案例
前端常用脚手架工具 前端有很多特定的脚手架工具大多都是为了特定的项目类型服务的,比如react项目中的reate-react-app,vue项目中的vue-cli,angular 项目中的angula ...
- 浅谈前端JavaScript编程风格
前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用E ...
随机推荐
- 灵雀云:etcd 集群运维实践
[编者的话]etcd 是 Kubernetes 集群的数据核心,最严重的情况是,当 etcd 出问题彻底无法恢复的时候,解决问题的办法可能只有重新搭建一个环境.因此围绕 etcd 相关的运维知识就比较 ...
- DLG消息
WM_GETMINMAXINFO 0X0024 WM_NCCREATE 0X0081 WM_NCCALCSIZE 0X0083 WM_CREATE 0X0001 WM_SIZE 0X0005 WM ...
- 【Linux】Jenkins安装(一)
摘要 本章介绍Jenkins的简单使用,关于Jenkins的安装,参照[Linux]Jenkins安装(一) 事例说明:在linux环境下,安装的jenkins,集成svn,tomcat的环境,项目是 ...
- 2018 CCPC网络赛 几道数学题
1002 Congruence equation 题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=6439 题解 : https://www.zyb ...
- jquery.uploadify上传插件HTML5版中文api使用说明
插件官网文档:http://www.uploadify.com/documentation/ H5版下载地址:https://download.csdn.net/download/u010075697 ...
- bzoj1036 [ZJOI2008]树的统计Count 树链剖分模板题
[ZJOI2008]树的统计Count Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成 一些操作: I. CHANGE u ...
- UDP广播-缓冲区过小
上次介绍到了关于客户端实时刷新摄像头所识别的图片的一些方法,采用了了UDP广播的技术做处理.理论上是没有问题的,将客户端运行在不同电脑上也能很好的看到效果,运行日志也没看出啥问题,结果今天翻看日志的时 ...
- Selenium WebDriver的工作原理
先通过一个简单的类比说个好理解的,这个比喻是我从美版知乎Quora上看到的,觉得比较形象.好理解拿来用用. 我们可以把WebDriver驱动浏览器类比成出租车司机开出租车. 在开出租车时有三个角色: ...
- dbf,Idx 文件格式
NDbfReaderEx about_indexes ntx file format
- 7.JAVA基础复习——JAVA中的设计模式单例模式
设计模式:是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 总体来说设计模式分为23种三大类: 创建型模式,共 ...