源码时代前端干货分享|Nuxt开发使用文档
-
一、Nuxt概述 Nuxt官方理解是Vue的通用框架，它的作用主要是用来作SSR（服务器端渲染）。而Vue是开发SPA（单页应用）的js框架。Nuxt采用Vue开发多页应用，并在服务端完成渲染，可以直接用npm
run generate命令将制作的vue项目生成为静态html ### 服务器渲染SSR的好处
SSR渲染的页面主要方便SEO进行搜索优化，比如：新闻 博客
电影等网站，就需要大量的进行搜索提供流量查询，这些网站就需要使用SSR进行优化处理，当然并不是所有网站都需要用到SSR，这个就需要看每个公司的产品的用处了服务器渲染流程
客户端发送url请求到服务器端，服务器端根据接收到的url信息在服务器端完成html+data页面的渲染， 然后将组装成的页面返回给客户端
Nuxt描述 Nuxt中就包含了 Vue开发服务端渲染的应用所需要的各种配置。 在node环境中使用命令nuxt generate 就可以将基于 Vue的应用提供生成对应的静态站点的功能。
Nuxt提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等 ### Nuxt特性 基于 Vue.js 自动代码分层
服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES2015+ 语法支持 打包和压缩 JS 和 CSS HTML 头部标签管理
本地开发支持热加载 集成 ESLint 支持各种样式预处理器： SASS、LESS、 Stylus 等等 支持 HTTP/2 推送 ##
二、Nuxt项目搭建 ### 方式一：运用Nuxt手脚架(create-nuxt-app)安装 1.
确保安装了npx(npx在npm5.0以上自动安装)后，运行命令
五、端口配置 方式一： 在package.json文件中配置 “config”: { “nuxt”: { “host”: “127.0.0.1”, “port”: “9999” } }, 方式二：
在nuxt.config.js中配置 server: { port: 8000, // 端口号 host:
‘127.0.0.1’, // 主机名 } ## 六、全局CSS样式配置 1.创建重置样式表normalize.css文件
2.配置nuxt.config.js文件中css属性
创建的所有页面中就具有重置表的样式 ## 七、路由 1. 页面之间跳转 原始方式：
推荐方式：
** ** 2.
nuxt已经配置好了路由，无需再配置就可以直接使用 比如：
Nuxt自动配置的路由如下：
3. 动态路由 注意：定义带参数的动态路由，需要在文件中创建以_开头的vue文件或者文件目录 比如：
采用vue中router-link方式写法
接收方式
4. 路由验证 Nuxt提供了一个专门验证的路由的方法validate方法八、过渡动效 1. 全局过渡效果设置 注意： 默认使用过渡效果名称： page 在assets/normalize.css文件中设置
然后在nuxt.config.js中css属性引用就可以让所有页面进入和离开都有过渡效果
2. 单个页面过渡动效设置 在assets/normalize.css文件中设置
在_id.vue页面中调用transtion属性九、视图模板 1. 定义全局默认HTML视图模板，在全局目录中创建app.html文件
- 页面布局视图模板 A. 在layout/default.vue中定义默认的视图
B. 自定义模板视图 1. 可以在layout中创建lgo.vue文件 - 在page中其他组件文件中引用layout属性，值为lgo
C. 错误页面 1.
通常在layout文件夹中创建一个error.vue页面,虽然他在layout中，但是我们应该把他当作页面，而不是视图模板，而且布局中不需要这个路由出口
D. 自定义头部信息
十、异步数据 注意： 由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象 1. Nuxt提供了几种不同的方法来操作asyncData方法 A. promise ( 没有追求 )
B. async 和 await( 有追求 ) 2. Prosmise
3. async 和 await
渲染页面： -