nuxt.js1-1

Posted 2020-11-07 小凡的耿

　　Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。再直白点说，就是Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及，很多人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。

　　

　　SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

　　SSR两个优点：

• SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
• 更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

　Nuxt.js的官方网站是这样介绍的：

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

　　Nuxt.js的特点（优点）：

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES6/ES7 语法支持
• 打包和压缩 JS 和 CSS
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus等等

Nuxt环境搭建和Hello World

　nuxt.js安装

　　1.用npm来安装vue-cli这个框架，如果你已经安装过了，可以省略这步。

npm install vue-cli -g

　　这个根据你的网络环境不同，安装的速度不仅相同，如果你的网络环境实在不好，可以考虑使用cnpm来进行安装。（在实际开发中我会尽量避免使用cnpm来进行安装，因为会出现一些未知的错误。）

　　安装完成后可以使用vue -V 来测试是否安装成功。（注意：这里要使用大写的V，小写无效）。

　　2.使用vue安装 nuxt

　　安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

　　这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

　　3.使用npm install安装依赖包

npm install

　　这个过程是要等一会的，如果你这个过程安装失败，也不要慌张，你可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

　　4.使用npm run dev 启动服务

npm run dev

5.在浏览器输入 localhost:3000,可以看到结果。

　　Hello World

　　学程序国际惯例的第一节都是来个Hello World ，我们先来体验一下。

　　在项目根目录下找到/pages/index.vue文件，让后把项目名称改写成Hello World。框架支持热更新，所以你不用刷新就自动更新了。