Nuxt.js实战 上

1.前言1.1.web渲染模式

在传统的web项目中,对于页面的展示,在程序上一共有两种渲染模式,分别是: 客户端渲染和服务器端渲染。

1.1.1.客户端渲染

​        所谓的客户端渲染指的是:  客户端(浏览器)使用AJAX向服务端发起http请求,服务端响应对应的json数据,客户端拿着数据这些数据之后,客户端生成Dom元素开始渲染html网页,并最终将html页面展示给用户。 

1.1.2.服务器端渲染

​        所谓的服务端渲染指的是:客户端(浏览器)发送请求到服务器,由服务器来生成html,然后响应给浏览器,浏览器展示html页面。 

1.1.3.发展过程中的问题

​        随着移动互联网新时代的到来,越来越多的网站会要求web前后端实现分离开发,也就是说服务端只专注业务,前端只专注用户体验,也正式因为这样,大量的前端渲染技术被应用了起来,比如流行的vue.js、react等框架,都提供了功能强大的前端渲染技术。
​        前端渲染技术的特点是在浏览器端生成DOM元素,渲染页面, 这就意味着网站的很多操作, 其实是通过js代码来实现的, 也正是因为这样, 网站将无法把搜索引擎的spider, 通过超链接的url引入服务端, 从而会导致搜索引擎无法顺利抓取网页, 网站的搜索排名下滑,对网站的"SEO"就造成了很大的影响。
​        PS :  SEO是网站为了提高自已的网站排名,获得更多的流量,对网站的结构及内容进行调整优化,以便搜索引擎(百度,google等)更好抓取到更优质的网站的内容。
1.2.为什么要用Nuxt.js
在web的两种渲染方式中,客户端渲染对网站的"SEO"很不友好,我们需要把一部分"需要SEO优化的界面"的渲染模式,修改为"服务器端渲染",就能解决这个问题。
但是,服务器端渲染在一定程度上违背了我们的"前后端分离开发模式"的原则,所以,直接使用服务器端渲染也不是很好。那有没有一种即能很好的实现前后端分离,又能实现服务端渲染的技术呢? Nuxt.js 
2.Nuxt.js介绍
Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
优点:
  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等
3.Nuxt.js实战 3.1.概述
​        本次演示将以案例的形式,演示Nuxt.js的使用方式。案例名字为"黑马旅游网",案例最终效果及要求,如下所述:
3.2.最终效果 
3.3.案例要求
  • 页面的头部,属于模版部分,该网站所有页面默认引入。

2.导航菜单栏,从数据库中获取,并在页面动态展示

3.页面的尾部,也属于模版部分,该网站所有页面默认引入

4.网站前台页面,必须使用Nuxt.js来实现
4.环境搭建 4.1 准备-安装Vue-cli
​        Nuxt.js 是一个基于 Vue.js 的通用应用框架。所以,如果搭建Nuxt.js项目,则需要Vue的支持。因此,我们需要先安装Vue-cli。 
4.2 创建项目 4.2.1 创建项目存放位置
  注意: 如果项目存放位置已存在,则无需创建
4.2.2 进入项目存放的位置 
4.2.3 创建项目
在创建项目时,可以使用nuxt.js项目模版创建
语法: vue init 模版名称 项目名
当前项目采用 nuxt-community/starter-template模版,项目名为 first-nuxt
注意: 项目名中不能有大写字母   此时,在  D:\VUEProjects 就多出来了一个  first-nuxt 文件夹 
4.3 初始化项目
4.3.1 进入  first-nuxt 文件夹   4.3.2 安装依赖包,进行初始化   当看到下列信息时,表示初始化成功 
4.4.启动项目
​        安装成功后,输入 npm run dev 启动项目
​        当出现项目的访问路径时,表示启动成功 
4.5.打开项目
​        此时,在浏览器访问 http://localhost:3000,即可看到界面效果(如下图),说明nuxt项目搭建成功。 

 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值