Nuxt的介绍及简单安装(vue-cli4.x)

一、简介

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端口

访问成功:
在这里插入图片描述


原创文章 252 获赞 42 访问量 214万+

猜你喜欢

转载自blog.csdn.net/Piconjo/article/details/105974533
今日推荐