文章目录
- 前言
- 一、知识普及
- 什么是服务端渲染
- 什么是客户端渲染?
- 服务端渲染与客户端渲染那个更优秀?
- 二、Nuxt.js的特点
- Nuxt.js的适用情况?
- 三、Vue是如何实现服务端渲染的?
- 安装依赖
- 使用vue安装 Nuxt
- 使用npm install安装依赖包
- 使用npm run dev 启动服务
前言
Nuxt.js官网
Nuxt.js
是一个基于 Vue.js 的服务端渲染应用框架,它可以帮我们轻松的实现同构应用。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js简单来说是Vue.js的通用框架,最常用的就是SSR(服务端渲染),nuxt.js这个框架,用Vue开发多页面应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态的html。
一、知识普及
什么是服务端渲染
后端先调用数据库,获得数据之后,将数据何页面元素进行拼接,组合成完整的html页面,在直接返回给浏览器,以用户浏览。
什么是客户端渲染?
数据由浏览器通过ajax动态取得,再通过js将数据填充到demo元素上最终展示到网页中,这样的过程叫客户端渲染。
服务端渲染与客户端渲染那个更优秀?
服务端渲染需要消耗更多的服务端资源(cpu,内存)
客户端渲染可以将静态资源部署到cdn上,实现高并发。
服务端渲染对seo更友好。
二、Nuxt.js的特点
- 基于
Vue
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- 静态文件服务
- EcmaScript6和EcmaScript7的语法支持
- 打包和压缩JavaScript和Css
- HTML头部标签管理
- 本地开发支持
热加载
- 集成ESLint
- 支持各种样式预编译器
SASS、LESS
等等 - 支持
HTTP/2
推送
Nuxt.js的适用情况?
Nuxt.js适合做博客,电影,咨询,新闻这样的需要收索引擎提供流量的项目,如果要做移动端的项目那么大可没必要只用这个框架了。
三、Vue是如何实现服务端渲染的?
安装依赖
npm install vue-cli -g
用npm来安装vue-cli这个框架。
安装完成后可以使用vue -V
来测试是否安装成功。(注意:这里要使用大写的V,小写无效)
使用vue安装 Nuxt
安装好vue-cli后,就可以使用init命令来初始化Nuxt.js项目。
vue init nuxt/starter
这时候他会在github上下载模版,然后会询问你项目的名称叫什么,作者什么的,这些完全可以根据自己的爱好填写。
使用npm install安装依赖包
npm install
这个过程是要等一会的,如果你这个过程安装失败,可以直接诶删除项目中的node_modules文件夹后,重新npm install进行安装。
使用npm run dev 启动服务
npm run dev
转载地址