当前位置：Nuxt开发使用文档
2019/11/18 14:41 分类： 技术交流 浏览：1
一、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以上自动安装)后，运行命令
2. 项目选项
3. 进入项目
4. 启动项目
5. 在浏览器中访问：http://localhost:3000 或者 http://127.0.0.1:3000
方式二：使用Vue安装Nuxt项目
1. 在全局安装Vue手脚架
使用vue -V测试是否安装成功
2. 在指定的位置创建项目文件名
3. Vue命令初始化Nuxt项目
4. 创建项目名
5. 进入项目，安装依赖
6. 启动项目
7. 在浏览器中访问：http://localhost:3000 或者 http://127.0.0.1:3000
三、Nuxt目录结构
四、Nuxt个性化配置文件描述(nuxt.config.js)
五、端口配置
方式一： 在package.json文件中配置
"config": {
"nuxt": {
"host": "127.0.0.1",
"port": "9999"
}
},
方式二： 在nuxt.config.js中配置
server: {
port: 8000, // 端口号
host: '127.0.0.1', // 主机名
}
六、全局CSS样式配置
- 创建重置样式表normalize.css文件
2.配置nuxt.config.js文件中css属性
创建的所有页面中就具有重置表的样式
七、路由
1. 页面之间跳转
原始方式： <a href=”/”></a>
<a href=”/news”></a>
<a href=”/about”></a>
推荐方式： <nuxt-link :to=”/”></nuxt-link>
<nuxt-link :to=”/news”></nuxt-link>
<nuxt-link :to=”/about”></nuxt-link>
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文件
2. 页面布局视图模板
A. 在layout/default.vue中定义默认的视图
B. 自定义模板视图
1. 可以在layout中创建lgo.vue文件
2. 在page中其他组件文件中引用layout属性，值为lgo
C. 错误页面
1. 通常在layout文件夹中创建一个error.vue页面,虽然他在layout中，但是我们应该把他当作页面，而不是视图模板，而且布局中不需要<nuxt />这个路由出口
D. 自定义头部信息
十、异步数据
注意： 由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象
1. Nuxt提供了几种不同的方法来操作asyncData方法
A. promise ( 没有追求 )
B. async 和 await( 有追求 )
2. Prosmise
3. async 和 await
渲染页面：
赞 0
