Nust.js介绍
Nust.js介绍
移动互联网的兴起促进了web 前后端分离开发模式的发展，服务端只专注业务，前端只专注用户体验，前端大量运用的前端渲染技术，比如流行的 vue.js、react框架 都实现了功能强大的 前端渲染 。但是，对于有SEO需求的网页如果使用前端渲染技术去开发就 不利于SEO 了，有没有一种即使用 vue.js 、 react 的前端技术也实现服务端渲染的技术呢？其实，对于 服务端渲染 的需求， vue.js、react这样流行的前端框架提供了服务端渲染 的 解决方案 。
Nust.js是什么
Nuxt.js是一个基于Vue.js的通用应用框架。
通过客户端、服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。
灵活的应用框架，基于他初始化新项目的基础结构框架代码，或者在已有Node.js项目中实用Nuxt.js.
Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。
Nuxt.js为客户端/服务端典型的应用框架模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等
react框架提供next.js实现服务端渲染。vue.js框架提供Nuxt.js实现服务端渲染。
Nuxt.js工作原理
客户端服务端渲染介绍
https://blog.csdn.net/qq_51497041/article/details/128483362
从客户端请求到
Nuxt.js
进行服务端渲染的整体的工作流程：
- 用户打开浏览器，输入网址请求到Node.js
- 部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据
- Nuxt.js获取到数据后进行服务端渲染
- Nuxt.js将html网页响应给浏览器
Nuxt.js包含的技术：
- Babel 是一个js的转码器，负责将ES6的代码转成浏览器识别的ES5代码。
- Webpack是一个前端工程打包工具。
- Vue.js是一个优秀的前端框架。
Nuxt.js的特性
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器：
- SASS、LESS、 Stylus等等
Nuxt.js基本使用
创建Nuxt工程
基础工程 starter-template-master
链接：https://pan.baidu.com/s/19SSYJyKeuNgeG59WwcwQ5Q
提取码：2015
二次封装的项目可直接用 xc-ui-pc-portal.zip
链接：https://pan.baidu.com/s/1qoNyw0CgCS4076G_hee6cA
提取码：2015
目录结构
直接运行即可 npm run dev
注意：
端口10000是被占用的需要修改
页面布局
页面布局就是页面内容的整体结构，通过在layouts
目录下添加布局文件来实现。在
layouts
根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用layout
属性来引用。
一个例子：
1、定义：layouts/test.vue布局文件，如下：
注意：布局文件中一定要加 <nuxt/> 组件用于显示页面内容。<template>
<template>
<div>
这里是头部区域!!!
<nuxt/>
这里是尾部区域!!!
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2、在pages目录创建user目录，并创建index.vue页面
在 pages/user/index.vue 页面里， 可以指定页面组件使用 test 布局，代码如下：
<template>
<div>
用户管理首页
</div>
</template>
<script>
export default{
layout:'test'
}
</script>
<style>
</style>
3、pages目录下的user.vue
<template>
<div>
用户管理导航页面 <nuxt-link :to="'/user/one'">one页面</nuxt-link>，<nuxt-link :to="'/user/101'">修改用户</nuxt-link>
<nuxt-child/><!--访问user目录下index.vue-->
</div>
</template>
<script>
export default{
layout:'test'
}
</script>
<style>
</style>
路由
基础路由
Nuxt.js
依据
pages
目录结构自动生成
vue-router
模块的路由配置。
Nuxt.js
根据
pages
的目录结构及页面名称定义规范来生成路由，下边是一个基础路由的例子：
假设
pages
的目录结构如下：
pages/‐‐| user/‐‐‐‐‐| index.vue‐‐‐‐‐| one.vue
那么，
Nuxt.js
自动生成的路由配置如下：
router: {
routes: [
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user‐one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}嵌套路由
你可以通过
vue-router
的子路由创建
Nuxt.js
应用的嵌套路由。
创建内嵌子路由，你需要添加一个
Vue
文件，同时添加一个
与该文件同名
的目录用来存放子视图组件。
别忘了在父级
Vue
文件内增加
<nuxt
-
child/>
用于显示子视图内容。
假设文件结构如：
pages/‐‐| user/‐‐‐‐‐| _id.vue‐‐‐‐‐| index.vue‐‐| user.vue
Nuxt.js
自动生成的路由配置如下：
router: {
routes: [
{
path: '/user',
component: 'pages/user.vue',
children: [
{
path: '',
component: 'pages/user/index.vue',
name: 'user'
},
{
path: ':id',
component: 'pages/user/_id.vue',
name: 'user‐id'
}
]
}
]
}
将
user.vue
文件创建到与
user
目录的父目录下，即和
user
目录保持平级。
<template>
<div>
用户管理导航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link>
<nuxt‐child/>
</div>
</template>
<script>
export default{
layout:"test"
}
</script>
<style>
</style>
_id.vue
页面实现了向页面传入
id
参数，页面内容如下：
<template>
<div>
修改用户信息{{id}}
</div>
</template>
<script>
export default{
layout:"test",
data(){
return {
id:''
}
},
mounted(){
this.id = this.$route.params.id;
console.log(this.id)
}
}
</script>
<style>
</style>
测试：
http://localhost:10000/user
点击修改：
获取数据
asyncData 方法
Nuxt.js
扩展了
Vue.js
，增加了一个叫
asyncData
的方法，
asyncData
方法会在
组件
（
限于页面组件
）每次
加载之前被调用
。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的 上下文对象
，你可以利用
asyncData
方法来获取数据，
Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法 返回的数据一并返回给当前组件。
注意：由于
asyncData
方法是在组件 初始化
前被调用的，所以在方法内是没有办法通过
this
来引用组件的实例对象。
例子：
<template>
<div>
修改用户信息{{id}},名称：{{name}}
</div>
</template>
<script>
export default{
layout:'test',
//根据id查询用户信息
asyncData(){
console.log("async方法")
return {
name:'黑马程序员'
}
},
data(){
return {
id:''
}
},
mounted(){
this.id = this.$route.params.id;
}
}
</script>
<style>
</style>
此方法在服务端被执行，观察服务端控制台打印输出
“async
方法
”
。
此方法返回data
模型数据，在服务端被渲染，最后响应给前端，刷新此页面查看页面源代码可以看到
name
模型数据已在页面源代码中显示。
补充：在源代码中能看到的数据都是服务端渲染的，不能看到说明是在前端生成的。
async /await方法
使用
async
和
await
配合
promise
也可以实现同步调用，
nuxt.js
中使用
async/await
实现同步调用效果。
1
、先测试异步调用，增加
a
、
b
两个方法，并在
mounted
中调用。
methods:{
a(){
return new Promise(function(resolve,reject){
setTimeout(function () {
resolve(1)
},2000)
})
},
b(){
return new Promise(function(resolve,reject){
setTimeout(function () {
resolve(2)
},1000)
})
}
},
mounted(){
this.a().then(res=>{
alert(res)
console.log(res)
})
this.b().then(res=>{
alert(res)
console.log(res)
})
}
观察客户端，并没有按照方法执行的顺序输出，
使用Promise实现了异步调用
。
2、使用
async/await
完成同步调用
async asyncData({ store, route }) {
console.log("async方法")
var a = await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("1")
resolve(1)
},2000)
});
var b = await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("2")
resolve(2)
},1000)
});
return {
name:'黑马程序员'
}
},观察服务端控制台发现是按照a、b方法的调用顺序输出1、2，实现了使用async/await完成同步调用。
扫一扫
3269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
