建站
咨询
售后
建站咨询
第一节：nuxt.js相关概述
nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。
1.那服务器端渲染到底有什么好处呢？
主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。
2.什么是SSR？
SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。
SSR两个优点：
(1)SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
(2)更快内容到达时间 传统的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环境搭建
1.nuxt.js安装
在使用npm前你需要安装Node到系统中。
（1）用npm来安装vue-cli这个框架。
npm install vue-cli -g
安装完成后可以使用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 启动服务
（5）在浏览器输入 localhost:3000,可以看到结果。
第三节 ：Nuxt目录结构
第四节：Nuxt常用配置项
1.配置IP和端口
开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1000。
/package.json
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1000"
}
},另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享题目：Nuxt.js开启SSR渲染的教程详解-创新互联
网页网址：http://lswzjz.com/article/gedpd.html
