vue服务端渲染nuxt.js 一文入门到放弃

最新推荐文章于 2024-05-11 10:40:21 发布

Posden

最新推荐文章于 2024-05-11 10:40:21 发布

阅读量917

点赞数

分类专栏： Vue 文章标签： Nuxt.js Vue

本文链接：https://blog.csdn.net/weixin_44420276/article/details/101596929

版权

Vue 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

官网链接

客户端渲染与服务器渲染

客户端渲染

在服务端Server放了一个HTML页面，客户端发送请求，服务端将页面给客户端，客户端在收到服务端响应的字符串后，然后浏览器从上到下依次解析，在解析过程中，如果发现ajax请求，则再次发起新的请求，拿到ajax响应结果后再模板引擎渲染。所以客户端渲染至少发送了两次请求。其中，第一次请求拿到的是页面，第二次请求拿到的是动态数据。总的来说，客户端渲染页面加载速度快，但是数据加载缓慢。

服务端渲染

是在服务端使用模板引擎（pug,art-template），模板引擎最早诞生于服务端，后来才发展到了前端。浏览器向服务端发起一个页面请求，实际上服务端响应浏览器的请求前已经将页面和数据渲染完成。因此，服务端渲染，响应的就是最终的结果，在客户端不需要再做任何处理。一次请求就可以完成渲染，因此服务端渲染比客户端渲染更快。

Nuxt.js

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等

初始化一个项目

npx create-nuxt-app <项目名>

npx是npm5.2新增的命令

避免全局安装模块，用完就删掉
没有就下载

在集成的服务器端框架之间进行选择:
选择您喜欢的 UI 框架:
选择您喜欢的测试框架:
选择你想要的 Nuxt 模式
添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
添加 EsLint 以在保存时代码规范和错误检查您的代码。
添加 Prettier 以在保存时格式化/美化您的代码。

在这里插入图片描述

Nuxt.js 特点

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等

在这里插入图片描述

启动项目

npm run dev

在这里插入图片描述

注意点

就像起始页，page/index.vue中

import Logo from '~/components/Logo.vue'

在 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png 方式。

配置IP和端口

在根目录下的 package.json 里对 config 项进行配置

  "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1029"
    }
  }   // 结尾不能有标点，这句话也没有

配置全局 css

定义一个全局的 CSS 来初始化我们的页面渲染，这里使用 normailze.css。根据个人需求

新建 assets/css/normalize.css

修改 nuxt.config.js

  css: [
    'element-ui/lib/theme-chalk/index.css',"~assets/css/normailze.css"
  ],

修改 webpack 配置

在 nuxt.config.js 中可以对 webpack 配置进行覆盖

修改默认布局

可通过添加 layouts/default.vue 文件来扩展应用的默认布局

ps:
在这里插入图片描述

uxtjs 中使用组件显示页面的主体内容.created 和 data 中的逻辑，是在服务端加载时处理的，并不是浏览器端，浏览器端的逻辑比如 window 或 location 等对象要在 mounted 中写，否则会报错.head 中定义一些元数据，这些元数据会被爬虫抓取到，可以在每一个页面中自定义.

添加静态资源

  <img src="~/static/image/yp.jpg" height="300px" />

@和~都可以用来引入图片

nuxt 的基本路由使用

pages/
–| user/
-----| index.vue
-----| one.vue
–| index.vue

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

asyncData 方法获取数据

使用 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。由于 asyncData 方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

<template>
    <div>
        <h1>姓名：{{info.name}}</h1>
        <h2>年龄：{{info.age}}</h2>
        <h2>兴趣：{{info.interest}}</h2>
        <p><nuxt-link to='/'>Home</nuxt-link></p>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            name: '',
        }
    },
    //方式一(await)
    // async asyncData(context) {
    //     console.log(await axios.get('https://api.xxxx.com/xxxx')) 
    //     let {data} = await axios.get('https://api.xxxx.com/xxxx') 
    //     return {info:data}
    //     error(params)//当请求错误时直接跳转到错误页面(放在返回值之后)
    // },
    //方式二
    asyncData ({ params }) {//请求
	return  axios({
	    method: 'get',
	    url: 'https://api.xxxx.com/xxxx'
	})
	.then(function (response) {
            console.log(response.data)
            return { info: response.data};
            error(params)
        })
    },
}
</script>

Nuxt 页面 meta 设置

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

添加页面切换特效

.page-enter-active, .page-leave-active {
    transition: opacity 2s;
}
.page-enter, .page-leave-active {
    opacity: 0;
}

然后在 nuxt.config.js 里加入一个全局的 css 文件就可以了。

css:['assets/css/main.css'],

制作一个详情页

<Row type="flex" gutter="10" justify="start" class="code-row-bg">
  <Col v-for="i in 10" :key="i" span="6">
    <Card style="width:100%">
      <nuxt-link :to="'/books/'+i">
        <div style="text-align:center">
          <img style="width:100%" src="https://img3.doubanio.com/view/subject/m/public/s6974202.jpg" />
          <h3>史蒂夫·乔布斯传</h3>
        </div>
      </nuxt-link>
    </Card>
  </Col>
</Row>

<template>
    <div>
        <Card style="width:100%">
            <div style="text-align:center">
                <img style="width:100%" src="https://img3.doubanio.com/view/subject/m/public/s6974202.jpg" />
                <h3>史蒂夫·乔布斯传</h3>
                <p>当前id : {{ id }}</p>
            </div>
        </Card>
    </div>
</template>

<script>
export default {
    validate({ params }) {
        return /^[0-9]+$/.test(params.id)
    },
    data() {
        return {
            id: this.$route.params.id
        }
    },
    head() {
        return {
            title: '史蒂夫·乔布斯传',
            meta: [{ hid: 'description', name: 'books', content: '史蒂夫·乔布斯传' }]
        }
    }
}
</script>

给整个网站添加 head

Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了

打包

npm run generate

Posden

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue服务端渲染nuxt.js 一文入门到放弃

官网链接客户端渲染与服务器渲染客户端渲染在服务端Server放了一个HTML页面，客户端发送请求，服务端将页面给客户端，客户端在收到服务端响应的字符串后，然后浏览器从上到下依次解析，在解析过程中，如果发现ajax请求，则再次发起新的请求，拿到ajax响应结果后再模板引擎渲染。所以客户端渲染至少发送了两次请求。其中，第一次请求拿到的是页面，第二次请求拿到的是动态数据。总的来说，客户端渲染...
复制链接

扫一扫