前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【免费视频教程】NuxtJs框架-安装与介绍

【免费视频教程】NuxtJs框架-安装与介绍

作者头像
web前端教室
发布2019-08-26 16:47:51
2.2K0
发布2019-08-26 16:47:51
举报
文章被收录于专栏:web前端教室web前端教室

【1】、nuxtJs的安装

【2】、nuxtJs的路由

今天咱们来学习一下,SSR(服务器端渲染)的nuxt.js框架

<!-- 第一部分,先介绍一下ssr和nuxt框架 -->

SPA(单页应用)不利于搜索引擎的SEO操作,

特别是百度根本没法抓取到SPA的内容页面,

<!-- 服务器端渲染有哪些好处 -->

1. 更好的 SEO,

由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2. 对于缓慢的网络或运行缓慢的设备。

可提供获取网页速度,有良好的用户体验。

3、ssr会减少对服务器的请求。

普通的页面,先获取文件,再读取内容,

读取到ajax的js的时候,再向服务器发送请求,获取内容。

这就是至少二次对服务器的请求了。

如果是ssr,直接就是在服务端渲染为完整的页面,

发送到浏览器了。

<!-- nuxt的介绍 -->

它是基于vue的ssr的服务端渲染的框架,

优点:

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能,支持异步数据

静态文件服务

ES6/ES7 语法支持

打包和压缩 JS 和 CSS

HTML头部标签管理

本地开发支持热加载

集成ESLint

支持各种样式预处理器:SASS、LESS、 Stylus等等

<!-- 第二部分,安装、搭建nuxt.js的开发环境 -->

1、安装node;

2、要安装vue-cli脚手架

<!-- 如果不会的话,

安装vue-cli的教程呢,网上自己看一下 -->

3、要全局安装 create-nuxt-app

npm install -g create-nuxt-app

4、创建项目

在你的电脑里,最好不是c盘,

建一个目录,

在cmd里面进入你刚才建的目录里,

npx create-nuxt-app 项目名(不能有大写字母)

5、在安装过程中,安装程序会问你一些问题,

例如,项目名

项目说明

项目的作者

你用什么第三方框架

用什么管理包...等,网上有很多截图,

我这个学习笔记没法截图,就不多写了

6、一会我会演示nuxt的安装过程,

7、全部安装结束 之后,就是npm run dev

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端教室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档