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

官网 链接

客户端渲染与服务器渲染

• 客户端渲染

在服务端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 等等

|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的页面，我们主要的工作区域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件，比如图片
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件

启动项目

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