Nuxt.js开启SSR渲染的教程详解(8)

日期：2020-05-11 栏目：程序人生浏览：次

这时候我们可以看到，浏览器中已经能输出结果了。asyncData的方法会把值返回到data中。是组件创建（页面渲染）之前的动作，所以不能使用this.info,
return {info:res.data}相当于在data中多了一个info:''。

2.ansycData的await方法

当然上面的方法稍显过时，现在都在用ansyc…await来解决异步,改写上面的代码。

<template>
 <div>
  <h1>姓名：{{info.name}}</h1>
  <h2>年龄：{{info.age}}</h2>
  <h2>兴趣：{{info.interest}}</h2>
 </div>
</template>
<script>
import axios from 'axios'
export default {
 data(){
  return {
   name:'hello World',
  }
 },
 async asyncData(){
  let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
  return {info: data}
 }
}
</script>

第十一节：静态资源和打包

1.静态资源

（1）直接引入图片
在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用

<div><img src="~static/logo.png" /></div>

“~”就相当于定位到了项目根目录，这时候图片路径就不会出现错误，就算打包也是正常的。

（2）CSS引入图片
如果在CSS中引入图片，方法和html中直接引入是一样的，也是用“~”符号引入。

<style>
 .diss{
  width: 300px;
  height: 100px;
  background-image: url('~static/logo.png')
 }
</style>

这时候在npm run dev 下是完全正常的。

2.打包

用Nuxt.js制作完成后，你可以打包成静态文件并放在服务器上，进行运行。

在终端中输入：

npm run generate

然后在dist文件夹下输入live-server就可以了。

总结：

Nuxt.js框架非常简单，因为大部分的事情他都为我们做好了，我们只要安装它的规则来编写代码。

以上所述是小编给大家介绍的Nuxt.js开启SSR渲染的教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持！

Nuxt.js开启SSR渲染的教程详解(8)

相关推荐