Vue开始使用NUXT框架开发

码客说

发布于 2019-10-21 17:26:34

2.3K0

发布于 2019-10-21 17:26:34

文章被收录于专栏：码客

前言

Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如服务端渲染、SEO、中间件支持、布局支持等。

所以用Nuxt的项目的环境必须有Node.js

官方文档

后话目前已经不用Nuxt了服务端和客户端渲染是有很多优点，但同时也带来了些麻烦，比如生命周期不但涉及服务端也涉及客户端，那些对象在哪个生命周期能用，以及SEO也可以通过其他手段实现，并且部署必须有Node.js环境，如果后端不是Node.js,就不建议使用了

生命周期

生命周期流程图

红框内的是Nuxt的生命周期(运行在服务端)
黄框内同时运行在服务端&&客户端上
绿框内则运行在客户端

Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在

所以,红框、黄框内的周期都不存在Window对象

<script>
export default {
  asyncData() {
    console.log(window) // 服务端报错
  },
  fetch() {
    console.log(window) // 服务端报错
  },
  created () {
    console.log(window) // undefined
  },
  mounted () {
    console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  }
}
</script>

文件(static/assets)

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

该目录名为Nuxt.js保留，不可更改。

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

对于JS来说，需要构建编译的放在assets目录中不需要的放在static中

视图(Document/Layout/Page)

与视图有关的有模版(Document)，布局(Layout)，页面(Page)

模版只能有一个，可以自定义也可以用默认的

定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

默认模板为：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

举个例子，你可以修改模板添加 IE 的条件表达式：

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

请确保在布局文件里面增加组件用于显示页面非布局内容。

举个例子 layouts/blog.vue:

<template>
  <div>
    <div>这里是博客导航</div>
    <nuxt/>
  </div>
</template>

在 pages/posts.vue 里，可以指定页面组件使用 blog 布局。

<script>
export default {
  layout: 'blog'
}
</script>

Meta标签

全局配置

nuxt.config.js

module.exports = {
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

局部配置

页面内

<script>
export default {
  head () {
    return {
      title:"首页",
      meta: [
        {
          name: '资讯',
          content: '资讯描述'
        },
      ],
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
      ]
    }
  }
}
</script>

引用JS插件的三种方式

比如我们页面要用到jquery

插件形式引用

首先在项目内运行

npm install --save jquery

在plugins目录下创建jq.js文件

let $ = require('jquery')
window.$ = $

在nuxt.config.js中配置

module.exports = {
  plugins: [
    {
      src: '~plugins/jq.js',
      ssr: false
    }
  ]
}

全局头部引用

module.exports = {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ]
  }
}

页面头部引用

<script>
export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ]
  }
}
</script>

数据(fetch/asyncData/validate)

fetch、asyncData、validate使用范围

只能在页面组件使用，也就是pages目录下的组件，而不是components和layout目录下的组件，要有所区分

asyncData 多请求

由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。 Nuxt.js框架中asyncData方法只能在pages中的.vue文件页面中使用。

如果要一次发送多个请求可进入如下操作：

async asyncData ({ params, error }) {
    let [request1Data, request2Data, request3Data] = await Promise.all([
      axios.get('/api/home/request1'),
      axios.get('/api/home/requset2'),
      axios.get('/api/home/request3')
    ])
    return {
      data1: request1Data.data,
      data2: request2Data.data,
      data3: request3Data.data
    }
 }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除

c++