一、简介
Nuxt.js是一个基于Vue.js的轻量级应用框架 可以在服务器端将vue渲染成html返回服务器
Nuxt可用来创建服务端渲染 (SSR) 应用 也可充当静态站点引擎生成静态站点应用 具有优雅的代码结构分层和热加载等特性
通过对客户端/服务器端基础架构的抽象组织 Nuxt.js主要关注应用的UI渲染
SSR(服务端渲染)相比SPA(单页面应用)的优点:
- 对SEO的支持
SPA(单页应用)对搜索引擎不太好 搜索引擎无法抓取
SSR的常用场景:诸如新闻网站 博客网站 电影网站等需要搜索引擎提供流量的网站 - 2、加载速度会比SPA应用更快
SPA是将所有的资源都加载到客户端 然后打开
而SSR是在服务器端渲染完页面直接返回浏览器
Nuxt的优点:
- 基于Vue.js
- 自动代码分层
- 服务端渲染(SSR)
- 强大的路由功能 支持异步数据
- 静态文件服务
- ES6/ES7语法支持
- 打包和压缩JS和CSS
- HTML头部标签管理
- 本地开发支持热加载
- 继承ESLint
- 支持各种样式的预处理器 例如SASS LESS Stylus等
二、安装
在vue-cli的老版本中 是可以使用vue init nuxt/starter进行安装的
但在新版本的vue-cli中不行了
使用官方推荐的npx来安装:
(npm的5.2.x版本后默认安装了npx)
只需要输入npx create-nuxt-app 项目名
即可下载Nuxt
使用该安装方式的好处是 可以自由选择不同的模块和组件进行搭配
1、选择程序语言:
2、选择包管理工具:
3、选择UI框架:
4、选择服务器端框架(none为Nuxt默认服务器):
5、选择模块(用空格进行选择/取消):
6、选择工具:
7、选择测试框架:
8、选择SSR(服务端渲染)还是SPA(单页面应用):
9、选择开发工具:
接下来就会自动安装npm包 稍等一会即可
安装成功:
项目目录:
启动
cd进入项目
输入npm run dev
启动
默认监听3000端口
访问成功: