nuxt.js 入门

哎呦喂
562 阅读9分钟

第一节： nuxt.js相关的概述

1、什么是nuxt.js

nuxt 是基于 vue 开发的一个应用框架，最常用的就是拿来做 ssr。Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html

那么什么是 ssr 呢，这就要提及一个相对的概念：csr。

2、csr和ssr概念

web网页开发从之前的 jsp（比如vt1的项目），php 转向现在的三大框架 angular react vue，其实就是从 ssr 到 csr 的转变，即从服务端渲染转而变为客户端渲染。

例如之前的 php 开发，是将网页内容和服务端代码逻辑写在一起的，在客户端请求时，服务端经过 php 引擎的渲染生成完整的 html 页面再返回给客户端，这种渲染出的页面在浏览器中右键查看源代码都是能看见 页面全部的 html 代码的。而客户端渲染如 vue，返回的就只有一个挂在 app 节点的 html文件和一个 js 文件，页面的内容都是在客户端的 js 渲染生成的。所以渲染 html 文本所在的位置就是 CSR（客户端渲染） 和 SSR（服务端渲染） 最本质的区分。

既然web开发从 ssr 过渡到了 csr，那我们为什么又再去做 ssr 呢，这就要涉及到双方的优缺了：

3、ssr和csr的优缺点

SSR：

优点：

  1. 便于 SEO，渲染完整的 html 更利于搜索引擎的抓取。

  2. 页面加载的白屏时间短（几乎没有）。

缺点：

  1. 每加载一个页面都要对服务器发起一次请求，服务器的渲染负荷重，请求缓慢。

  2. 每次加载都会刷新页面，即使只是页面中的小区域需要改变。

CSR：

优点：

  1. 页面具有优秀的性能，更利于页面交互。

缺点：

  1. 不利于SEO

  2. 首页初始化加载白屏时间长。

4、为什么使用nuxt.js

所以在我们普遍使用三大框架的今天，如果我们的页面需要对 SEO 的良好支持，这就需要我们做 ssr 了。

特点：

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


第二节：nuxt.js项目的搭建

 1/ 创建项目

如果你想使用官方脚手架搭建项目，要确保npm版本在 5.2+ ，目前已经是6.5.0了，我的本地是 5.6.0 ，符合要求，开始动手搭建

       npx create-nuxt-app <项目名>

2/ 创建过程中具体的选择：

Project name TiBug.Nuxt //项目名称

Project description //项目描述

Use a custom server framework //选择通用的服务端渲染模板框架：none，是默认服务 Nuxt default serve

Use a custom UI framework //选择通用UI框架：Element

Choose rendering mode //选择渲染模式：SSR或SPA

Use axios module //是否使用 axios 进行http请求：yes

Use eslint //是否使用代码格式纠错: no，会各种格式警告

Use prettier //是否代码美化：yes

Author name //作者名

Choose a package //选择一个包管理：npm

ps注意：你可以根据情况自己去选择，比如你不喜欢用 nuxt 自带的服务器渲染，想使用 Express ，比如你可以直接在这里就选择好你喜欢的样式，这里使用 ElementUI 样式框架。这相对以前的版本，已经有很大的改观了

3、生成目录


简单介绍一下：


4、Nuxt.js和纯Vue项目的简单对比

(1). build后目标产物不同

       vue: dist

       nuxt: .nuxt

(2). 网页渲染流程

      vue: 客户端渲染，先下载js后，通过ajax来渲染页面；

     nuxt： 服务端渲染，可以做到服务端拼接好html后直接返回，首屏可以做到无需发起ajax请求；

(3). 部署流程

     vue： 只需部署dist目录到服务器，没有服务端，需要用nginx等做Web服务器；

     nuxt： 需要部署几乎所有文件到服务器（除node_modules，.git），自带服务端，需要pm2管理（部署时需要reload pm2），若要求用域名，则需要nginx做代理。

(4). 项目入口

      vue: /src/main.js，在main.js可以做一些全局注册的初始化工作； nuxt: 没有main.js入口文件，项目初始化的操作需要通过nuxt.config.js进行配置指定。

第三节：Nuxt常用配置项

1/ 配置ip和端口

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

/package.json

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

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

2.配置全局CSS

在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0。

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

/assets/theme/global.css

html{
    color:red;
}

/nuxt.config.js

  css:['~assets/theme/global.styl],

设置好后，在终端输入npm run dev 。然后你会发现样式生效。

3.配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置,相关可参照此链接www.cnblogs.com/ssh-007/p/7…

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

如果想要其他配置，也可以在nuxt.config.js的extend 里面配置

4.修改title

nuxt.config.js文件中,修改title为测试项目：

 head: {
    title: '测试项目',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

修改后重启服务，即运行 npm run dev，如果单个页面想要修改， 也可以在当前页面修改

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

第四节：Nuxt的路由配置和参数传递

Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。 

1.简单路由Demo

<nuxt-link>标签我们现在根目录的pages文件下新建两个文件夹。

（1）在list文件夹下新建index.vue文件，并写入下面的代码：

（2）在detail文件夹下新建index.vue文件，并写入下面的代码：由于Nuxt.js都为我们作好了，不用写任何配置代码。所以我们可以在页面上实现相关跳转。

<nuxt-link>标签Nuxt.js并不推荐这种<a>标签的作法，它为我们准备了<nuxt-link>标签（vue中叫组件） 我们再次预览页面，也是可以进行正常跳转的，在实际开发中尽量使用标签的方法跳转路由。

2.params传递参数路

 由于经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向详情页面传递个参数， 然后在新闻页面进行简单的接收 

（1）我们先修改头部下的Index.vue文件，给跳转加上params参数，传递3306 <nuxt-link :to="{name:'detail', params:{ detailId: 3306 }}">详情页</nuxt-link>  

（2）在detail文件夹下的index.vue里用$route.params.detailId进行接收，

代码如下 注意：name其实指向的是路由（文件夹或文件名），而路由死活区分大小写的 ， 所以to后面区分大小写！！！ 建议文件夹都写成小写的。

第五节：Nuxt的动态路由和参数校验

 1.动态路由，其实动态路由就是带参数的路由。

比如我们现在列表模块下面有很多详细页，这时候就需要动态路由

（1）详情页面： 我在detail文件夹下面新建了_id.vue的文件，以下画线为前缀的Vue文件就是动态路由， 然后在文件里边有 $route.params.id来接收参数。/pages/detail/_id.vue

<template>  
<div>
      <h2>News-Content [{{$route.params.id}}]</h2> 
 </div>
 </template>

（2）修改列表路由我们在/pages/list/index.vue进行修改，增加两个详细页的路由News-1和News-2 代码写好后，打开npm run dev 进行查看，

我们已经进入了详细页，并在详细页中取得了传递过来的新闻id 

2.参数校验

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

（1）在接受参数的页面添加/pages/detail/_id.vue

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

使用了validate方法，并把params传递进去，然后用正则进行了校验， 如果正则返回了true正常进入页面， 如果返回false进入404页面。

第六节：Nuxt的路由动画效果

路由的动画效果，也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果， 一种是全局的，一种是针对单独页面制作。

1.全局路由动画全局动画默认使用page来进行设置，

例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。

（1）添加样式文件/assets/theme/global.styl

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

2.单独设置页面动效想给一个页面单独设置特殊的效果时

（1）在全局样式 中添加以下内容

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

（2）然后在想要的组件中设置

export default {
  transition:'test'
}

第七节：Nuxt的默认模版和默认布局

在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。 这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模版。 这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入； 模版比较方便，但是只能每个页面都引入。

1.默认模板

Nuxt为我们提供了超简单的默认模版订制方法， 只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入“ 学习nuxt.js” 这几个字，我们就可以使用默认模版来完成。

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>学习nuxt.js</p>
    {{ APP }}
</body>
</html>

这里的{{ HEAD }}读取的是nuxt.config.js里的信息，{{APP}} 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写，如果小写会报错的。

注意：如果你建立了默认模板后，记得要重启服务器，否则显示不会成功；但是默认布局是不用重启服务器的。

2.默认布局

默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。 需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制。

需求：我们在每个页面的最顶部放入“学习nuxt.js” 这几个字，看一下在默认布局里的实现。

<template>
  <div>
    <p>学习nuxt.js</p>
    <nuxt/>
  </div>
</template>

ps: 这里的<nuxt/> 就相当于我们每个页面的内容，你也可以把一些通用样式放入这个默认布局里，但会增加页面的复杂程度。总结：要区分默认模版和默认布局的区别，模版可以订制很多头部信息，包括IE版本的判断；模版只能定制<template>里的内容，跟布局有关系。 在工作中修改时要看情况来编写代码。

第八节：Nuxt的错误页面和个性meta设置

1.Nuxt的错误页面

建立错误页面在根目录下的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>的简单写法直接跟上路径就可以了。

2.个性meta设置页面

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

(1）我们先把pages/detail/index.vue页面的链接进行修改一下，传入一个title， 目的是为了在详细页面进行接收title，形成文章的标题 在：/pages/detail/index.vue

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

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

  <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>

第九节：asyncData方法获取数据

Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData，异步请求数据。

（1）创建远程数据在这里制作一些假的远程数据， 我选择的网站是 myjson.com， 它是一个json的简单仓库，学习使用是非常适合的。 我们打开网站，在对话框中输入JSON代码，这个代码可以随意输入， key和value要求采用字符串格式创建。输入后保存，网站会给你一个地址， 这就是你这个JSON仓库的地址了。https://api.myjson.com/bins/16i4iw

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

npm install axios --save

具体操作：

ansycData的await方法我们在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 {
         msg:'hello World',
     }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/1ctwlm')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
  }
}
</script>

第十节：静态资源和打包

1.静态资源

（1）直接引入图片
在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用
<div><img src="~static/1.png" /></div>

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

（2）CSS引入图片
如果在CSS中引入图片，方法和html中直接引入是一样的，也是用“~”符号引入。
<style>
  .test{
    width: 300px;
    height: 100px;
    background-image: url('~static/1.png')
  }
</style>

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

2.打包

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

在终端中输入：

npm run generate

然后在dist文件夹下输入live-server就可以了，若没有安装，则需安装：

（1）安装指令：

npm install live-server

（2）转到dist目录下执行指令

live-server

成功后会自动打开网页，加载dist目录下的index.html文件。若出现Error: listen EACCES 0.0.0.0:8080错误，说明端口被占用了，参考此链接www.cnblogs.com/bfwbfw/p/10… 解决。

打包之后会根据在pages下面自己创建的文件或文件夹，最终生成对应的文件夹，里面是一系列html文件。例如：

本地运行 live-server这个命令有问题， 需要修改环境变量。找了篇文章看了看

https://blog.csdn.net/g1604686308/article/details/102330627

总结：Nuxt.js框架非常简单，因为大部分的事情他都为我们做好了，我们只要安装它的规则来编写代码，Nuxt.js 主要关注的是应用的 UI渲染（使用vue来开发多页应用，最终生成html静态文件）




avatar
文章
阅读
粉丝