【Nuxt】02 Nuxt2项目搭建与配置、路由使用、生命周期、国际化等

一、 项目搭建

1 Nuxt 简介

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

Nuxt.js 简单的说就是 Vue.js 的通用框架，最常用的就是用来作 SSR（服务器端渲染）。再直白点说，就是 Vue.js 原来是开发 SPA（单页应用）的，但是随着技术的普及，很多人想用 Vue 开发多页应用，并在服务端完成渲染。这时候就出现了 Nuxt.js 这个框架，她简化了 SSR 的开发难度。还可以直接用命令把我们制作的 vue 项目生成为静态 html（我们也称这个技术解决方案为 SSG）。

项目搭建与配置

npx create-nuxt-app nuxt-demo

然后按照需要进行配置项选择
当运行完时，它将安装所有依赖项，因此下一步是启动项目:

cd 
npm run dev

应用现在运行在 http://localhost:3000 上运行。

2 Nuxt 目录结构介绍

|-- .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包管理配置文件

别名	目录
~
或 @	srcDir
~~
或 @@	rootDir

二、 Nuxt 常用配置项

1 配置IP和端口：

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

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

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

2 配置全局CSS

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

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

PS：如果使用 scss 需要安装依赖 npm install --save-dev node-sass sass-loader

/* assets/css/normailze.css */
html{
    color:red;
}

// nuxt.config.js
css:['~assets/css/normailze.css']

3 配置 webpack 的 loader

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

// 自定义 webpack 配置
build: {
    transpile: [/^element-ui/],
    extend (config, { isDev, isClient }) {
      // 音频文件 file-loader 处理，使用 

4 环境配置

第一步：安装cross-env插件

npm install cross-env --save

第二步：根目录下创建env.js文件,配置环境变量

配置各个环境下的接口地址和服务端口

export default {
  dev: {
    server: {
      host: '0.0.0.0',
      port: 8888,
    },
    api: {
      port: '',
      host: '开发环境接口地址'
    }
  },
  test: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '测试环境接口地址''
    }
  },
  uat: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '预发布环境接口地址''
    }
  },
  prod: {
    server: {
      host: '0.0.0.0',
      port: 7085,
    },
    api: {
      port: '',
      host: '生产环境接口地址''
    }
  }
}

第三步：nuxt.config.js配置基本的接口地址变量

import env from './env';
export default {
  env:{
    MODE:process.env.MODE
  },
  axios: {
    baseURL: env[process.env.MODE].api.host,
  },
  //修改默认的访问端口
  server: env[process.env.MODE].server,
}

三、Nuxt 基础使用

1 Nuxt 路由配置和参数传递

学习前端框架都要学习路由机制，因为路由可以体现我们的业务逻辑，把模块串联起来，让程序焕发光彩。那简单的说路由就是我们的跳转机制，也可以简单理解成链接跳转。Nuxt.js 的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

1. 简单路由Demo

我们现在根目录的pages文件下新建两个文件夹，about 和 news，在 about 文件夹下新建 index.vue 文件

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

在 news 文件夹下新建 index.vue 文件

<template>
  <div>
      <h2>News Index pageh2>
       <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">NEWSa>li>
    ul>
  div>
template>

标签

虽然上面的例子跳转已经成功，但是 Nuxt.js 并不推荐这种标签的作法，它为我们准备了标签（vue中叫组件），我们先把首页的标签替换成。

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}">HOMEnuxt-link>li>
      <li><nuxt-link :to="{name:'about'}">ABOUTnuxt-link>li>
      <li><nuxt-link :to="{name:'news'}">NEWSnuxt-link>li>
    ul>
  div>
template>

我们再次预览页面，也是可以进行正常跳转的，在实际开发中尽量使用标签的方法跳转路由。

2. params传递参数

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

我们先修改 pages下的 Index.vue文件，给新闻的跳转加上 params 参数，传递 3306 ID。注意：一般情况下我们不推荐这种传递参数方法，因为我们一刷新，参数立马就丢失了！

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}">HOMEli>
      <li><nuxt-link :to="{name:'about'}">ABOUTli>
      <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWSli>
    ul>
  div>
template>

在 news 文件夹下的 index.vue 里用 $route.params.newsId 进行接收

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

2 Nuxt 动态路由和参数校验

简单的路由已经弄清楚了，这节看一下动态路由，其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详细页，这时候就需要动态路由的帮助了。

1. 新闻详细页面传递参数

在 news 文件夹下面新建了 _id.vue 的文件，以下画线为前缀的 Vue 文件就是动态路由，然后在文件里边有 $route.params.id 来接收参数。

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

修改新闻首页路由，我们在 /pages/news/index.vue 进行修改，增加两个详细页的路由

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

2. 路由动态参数校验

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

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

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

3 Nuxt 路由动画效果

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

1. 全局路由动画设置

全局动画默认使用 page 来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的 assets/css 下建立一个 main.css 文件

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

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

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

这时候在页面切换的时候就会有2秒钟的动画切换效果了，但是你会发现一些页面是没有效果的，这是因为你没有是组件来制作跳转链接，注意使用 a 标签跳转是没有动画的，这个是为什么呢？

比如我们上节课作的动态路由新闻页，你就需要改成下面的链接，改过之后你就会看到动画效果了

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

2. 单独设置页面动效

想给一个页面单独设置特殊的效果时，我们只要在 css 里改变默认的 page，然后在页面组件的配置中加入transition 字段即可。例如，我们想给about页面加入一个字体放大然后缩小的效果，其他页面没有这个效果。

在全局样式 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/index.vue 组件中设置，这时候就有了页面的切换独特动效了。

export default {
  transition:'test'
}

4 Nuxt 默认模板和布局

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

1. 默认模板

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

DOCTYPE html
<html lang="en">
<head>
   {{ HEAD }}
head>
<body>
    <p>学而时习之，不亦说乎p>
    {{ APP }}
body>
html>

这里的 {{ HEAD }} 读取的是 nuxt.config.js 里的信息，{{ APP }} 就是我们写的 pages文件夹下的主体页面了。需要注意的是 HEAD 和 APP 都需要大写，如果小写会报错的。这里还有一个小坑需要大家注意，就是如果你建立了默认模板后，记得要重启服务器，否则你的显示不会成功；但是默认布局是不用重启服务器的。

2. 默认布局

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