Nuxt.js(开启SSR渲染)

为什么要用Nuxt?

  1.SEO

  我们需要搜索引擎更多地抓取到我们的内容,更详细地认识到我们的网页结构,而不是仅对首页或特定静态页进行索引.再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html.

   Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了.

  

什么是SSR?

SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。

Nuxt.js的官方网站是这样介绍的:

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js是特点(优点):

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能,支持异步数据

静态文件服务  ES6/ES7 语法支持

打包和压缩 JS 和 CSS  HTML头部标签管理

本地开发支持热加载

集成ESLint

支持各种样式预处理器: SASS、LESS、 Stylus等等

Nuxt环境搭建和Hello World

1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。

npm install vue-cli -g

2.使用vue安装 nuxt

vue init nuxt/starter

3.使用npm install安装依赖包

npm install

4.使用npm run dev 启动服务

npm run dev

5.在浏览器输入 localhost:3000,可以看到结果。

可以看到 项目目录结构也发生了变化。

目录结构:

Nuxt常用配置项

配置IP和端口:

开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1,端口设置1818。

/package.json

 "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

配置好后,我们在终端中输入npm run dev,然后你会看到服务地址改为了127.0.0.1:1818.

配置全局CSS

在开发多页项目时,都会定义一个全局的CSS来初始化我们的页面渲染,比如把padding和margin设置成0,网上也有非常出名的开源css文件normailze.css。要定义这些配置,需要在nuxt.config.js里进行操作。

比如现在我们要把页面字体设置为红色,就可以在assets/css/normailze.css文件,然后把字体设置为红色。

/assets/css/normailze.css

html{
    color:red;
}

/nuxt.config.js

css:[‘~assets/css/normailze.css‘],

设置好后,在终端输入npm run dev 。然后你会发现字体已经变成了红色。

配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的,比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

build: {

    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:‘img/[name].[hash].[ext]‘
        }
      }
    ],

    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: ‘pre‘,
          test: /\.(js|vue)$/,
          loader: ‘eslint-loader‘,
          exclude: /(node_modules)/
        })
      }
    }
  }

Nuxt的路由配置和参数传递

在根目录的pages文件下about.vue文件

<template>
  <div>
      <h2>About Index page</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

在根目录的pages文件下news.vue文件

<template>
  <div>
      <h2>News Index page</h2>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

修改原来的pages文件夹下的index.vue

<template>
  <div>
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">ABOUT</a></li>
      <li><a href="/news">NEWS</a></li>
    </ul>
  </div>
</template>

<script>

export default {
  components: {

  }
}
</script>

<style>
 

<nuxt-link>标签以及 params传递参数

修改pages下的Index.vue文件,给新闻的跳转加上params参数,传递3306ID。

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:‘index‘}">HOME</nuxt-link></li>
      <li><nuxt-link :to="{name:‘about‘}">ABOUT</nuxt-link></li>
      <li><nuxt-link :to="{name:‘news‘,params:{newsId:3306}}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>

<script>

export default {
  components: {

  }
}
</script>

<style>

</style>

在news.vue里用$route.params.newsId进行接收,代码如下

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

Nuxt的动态路由和参数校验

新建_id.vue的文件    /pages/_id.vue

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

在/pages/news.vue进行修改,增加两个详细页的路由News-1和News-2

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/123">News-1</a></li>
        <li><a href="/456">News-2</a></li>
      </ul>
  </div>
</template>

进入一个页面,对参数传递的正确性校验是必须的,Nuxt.js也贴心的为我们准备了校验方法validate( )

/pages/_id.vue

export default {

  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }

}

Nuxt的路由动画效果

全局路由动画

/assets/css/main.css

.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‘],

这时候在页面切换的时候就会有2秒钟的动画切换效果了,但是你会发现一些页面是没有效果的,这是因为你没有是<nuxt-link>组件来制作跳转链接。你需要进行更改。

单独设置页面动效

在全局样式assets/main.css 中添加以下内容。

.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;

}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}

然后在about.vue组件中设置

export default {
  transition:‘test‘
}

Nuxt的错误页面和个性meta设置

建立错误页面

在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件。

<template>
  <div>
      <h2 v-if="error.statusCode==404">404页面不存在</h2>
      <h2 v-else>500服务器错误</h2>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>

<script>
export default {
  props:[‘error‘],
}
</script>

代码用v-if进行判断错误类型,需要注意的是这个错误是你需要在<script>里进行声明的,如果不声明程序是找不到error.statusCode的。

这里用了一个<nuxt-link>的简单写法直接跟上路径就可以了。

个性meta设置

页面的Meta对于SEO的设置非常重要,比如你现在要作个新闻页面,那为了搜索引擎对新闻的收录,需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。

1.我们先把pages/news.vue页面的链接进行修改一下,传入一个title,目的是为了在新闻具体页面进行接收title,形成文章的标题。

/pages/news.vue

<li><nuxt-link :to="{name:‘news-id‘,params:{id:123,title:‘测试.com‘}}">News-1</nuxt-link></li>

2.第一步完成后,我们修改/pages/_id.vue,让它根据传递值变成独特的meta和title标签。

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>
<script>
export default {

  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//独立设置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:‘description‘,name:‘news‘,content:‘This is news page‘}
        ]
      }
    }
}

</script>

注意:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid 键为meta标签配一个唯一的标识编号。

asyncData方法获取数据

创建远程数据

在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。
我们打开网站,在对话空中输入JSON代码,这个代码可以自己随意输入哦。

{
  "name": "JSon",
  "age": 28,
  "interest": "hello!"
}

输入后,网站会给你一个地址,这就是你这个JSON仓库的地址了。

https://api.myjson.com/bins/w043s

安装Axios

Vue.js官方推荐使用的远程数据获取方式就Axios,所以我们安装官方推荐,来使用Axios。这里我们使用npm 来安装 axios。
直接在终端中输入下面的命令:

npm install axios --save

ansycData的promise方法

我们在pages下面新建一个文件,叫做ansyData.vue。
然后写入下面的代码:

<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‘,
     }
  },
  asyncData(){
      return axios.get(‘https://api.myjson.com/bins/w043s‘)
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })

  }
}
</script>

这时候我们可以看到,浏览器中已经能输出结果了。

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/w043s‘)
      return {info: data}

  }
}
</script>

静态资源和打包

Nuxt.js项目中如何放置静态资源和打包

直接引入图片

我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用

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

这种引用方法是不用估计相对路径的,“~”就相当于定位到了项目跟目录,这时候你的图片路径就不会出现错误,就算打包也是正常的。

CSS引入图片

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

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

这时候在npm run dev 下是完全正常的,那我们看一下打包。

打包静态HTML并运行

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

在终端中输入:

npm run generate

会生成一个dist文件夹,里边就是生产的静态html文件,直接放到服务器端进行运行了。

文章来源:http://jspang.com/2018/02/26/nuxt.js/

原文地址:https://www.cnblogs.com/sxgxiaoge/p/9401072.html

时间: 2024-10-10 20:06:13

Nuxt.js(开启SSR渲染)的相关文章

Nuxt.js开启SSR渲染

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

Nuxt.js服务端渲染实践,从开发到部署

感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,也成功说服了公司新项目采用前后端分离的解决方案,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队. 解决的问题 路由鉴权 第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地.官方使用express-session解决这个问题,但是这样做后端也需要使用nodejs,而我们公司使用的PHP.转念一想

Nuxt.js部署应用的方式

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 推荐的 package.json配置如下: { "name": "my-app",

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

nuxt.js中asyncData 方法能够在渲染组件之前异步获取数据

https://zh.nuxtjs.org/api/ asyncData 方法 你可能想要在服务器端获取并渲染数据.Nuxt.js添加了asyncData方法使得你能够在渲染组件之前异步获取数据. asyncData方法会在组件(限于页面组件)每次加载之前被调用.它可以在服务端或路由更新之前被调用. 原文地址:https://www.cnblogs.com/marquess/p/12628749.html

Nuxt.js知识点

起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端. Nuxt.js是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染.这时候就出现了Nuxt.js这个框架,她简化了

nuxt.js express模板项目服务器部署

nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进行代理访问,其实有点多余,直接用host文件就可以达到相同的效果,仅供娱乐吧,熟悉一下nginx的基本配置也是好的,其实这段时间研究nuxt.js比较多,主要还是想提高客户端访问首页更快一点. 之前使用nuxt.js generate直接生成对应的html静态文件,这个不需要服务器安装什么特殊的环境

vue-ssr之nuxt.js的插件使用

有时候,我们会有这样的需求,在项目的前端页面中需要使用一个swiper插件,来实现图片轮播,但是nuxt是在服务端进行编译的,那么问题来了,我们如何像在vue中那样使用第三方模块,封装轮播公用组件呢?答案是:使用nuxt到插件功能. 官方文档: Nuxt.js允许在实例化Vue.js应用程序之前运行js插件.这在您需要使用自己的库或第三方模块时特别有用. 下面就是一个封装swiper轮播插件到用例. 在nuxt.config.js文件中进行如下配置 ... plugins: [ { src: '