nuxt2框架知识总结

一、前言

上面原理转载自：https://blog.csdn.net/xiaodi520520/article/details/102732337

1、nuxt常用配置项

1.1 CSS全局配置

在assets/css/目录下创建一个样式文件叫：normailze.css

html {  color:red; }
1

找到nuxt.config.js文件添加如下代码：

/*
    ~  代表根目录，相当于VUE中配置的@符号
*/
css:['~assets/css/normailze.css'],  
1
2
3
4

1.2 配置IP和端口

开发中指定固定IP与端口号，找到package.json文件输入以下内容

/*
        host    表示IP地址
        port    表示端口设置
*/
"config":{
   "nuxt":{
         "host":"127.0.0.56",
          "port":"8000"
     }
},
1
2
3
4
5
6
7
8
9
10

1.3 webpack中的loader配置

配置一个url-loader来进行小图片的64位打包，在nuxt.config.js的build选项里进行配置

build: {
    rules:[
      {
          //处理图片资源
          //问题:默认处理不了html中img图片
          test:/\.(png|jpe?g|gif|svg)$/,
          //使用一个loader
          //下载 url-loader file-loader
          loader:'url-loader',
          options:{
            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)/
        })
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

以上无论哪一环节配置好后进行npm run dev重启

2、Nuxt的路由配置和params参数传递

根目录的pages文件下新建两个文件夹，about和news,如下图

在about文件夹下新建index.vue文件，并写入下面的代码：

<template>
    <div>
        你好我是About页面
        <router-link :to="{name:'index'}">HOME</router-link>
    </div>
</template>
1
2
3
4
5
6

在news文件夹下新建index.vue文件，并写入下面的代码：

<template>
    <div>
        你好我是news页面
        接收参数newsID:{{$route.params.newsId}}
        <router-link :to="{name:'index'}">HOME</router-link>
    </div>
</template>
1
2
3
4
5
6
7

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

<template>
  <div>
    Hello World
    <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>
1
2
3
4
5
6
7
8
9
10

注：nuxt-link 标签用于页面跳转相当于 a 标签

3、Nuxt的动态路由和参数校验

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

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

<template>
    <div>
        你好我是news页面
        <!-- 
            这样子是不行的
            <router-link :to="{name:'index',params:{id:123}}">HOME</router-link>
            <router-link :to="{name:'news',params:{id:456}}">news-1</router-link>
            <router-link :to="{name:'news',params:{id:567}}">news-2</router-link> 
        -->
        <!-- 下面这种相当于vue的params传参 -->
       <!--  直接写a标签也可以
       		<a href="/news/123">news-1</a>
        	<a href="/news/456">news-2</a>
        	<a href="/news/haha">news-3</a>
         -->
        <!-- 通过route-link 传参，此处name的名字必须是以‘ news-id ’ 进行输写->
        <router-link :to="{name:'index',params:{id:123}}">HOME</router-link>
        <router-link :to="{name:'news-id',params:{id:456}}">news-1</router-link>
        <router-link :to="{name:'news-id',params:{id:789}}">news-2</router-link>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

动态参数校验
Nuxt.js 的校验方法使用validate( )，找到/pages/news/_id.vue，在script标签里写入如下内容

<template>
  <div>
    获取ID参数:{{$route.params.id}}
  </div>
</template>
<script>
	export default {
	    validate ({ params }) {
	      //参数必须为数字，如果不是数字会页面报错：正则返回了true正常进入页面，如果返回false进入404页面
	      return /^\d+$/.test(params.id)
	    }
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

4、Nuxt的路由动画效果

路由切换动画效果
1、全局路由动画效果(指所有的页面都使用)
先在根目录的assets/css下建立一个css文件。

html{
    color: rebeccapurple;
}
/*名字必须按照下面的写，这个是nuxt规定的*/
/* 全局样式 */
.page-enter-active, .page-leave-active {
    transition: opacity 2s;
}
.page-enter, .page-leave-active {
    opacity: 0;
}
1
2
3
4
5
6
7
8
9
10
11

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

css: ['~assets/css/normailze.css'],
1

这时候在页面切换的时候就会有2秒钟的动画切换效果了，如果有些页面是没有效果，这是因为没有用 nuxt-link 组件来制作跳转链接。如果以前用的是a标签换成nuxt-link标签。

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

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

/* 单独设置页面动效 */
.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;

}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}
1
2
3
4
5
6
7
8
9
10

然后在about/index.vue组件中设置

export default {
  transition:'test'
}
1
2
3

注：CSS样式中的 test- 必须与组件中定义的transition 的名字 ‘test’ 相同。也就是说transition中的名字叫什么，那么 CSS 中的开始名字叫什么。需保持一致。

5、Nuxt的默认模版和默认布局

1、默认模版,需要在根目录下创建一个app.html，

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        这段代码不需要写,因为在 nuxt.config.js 里 nuxt.js 已经默认配置了，
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title> 
    -->
    {{HEAD}}
</head>
<body>
    <!-- 
    	{{APP}} 就是我们写的pages文件夹下的主体页面。需要注意的是HEAD和APP都需要大写，
    	如果小写会报错的。 
    -->
    <p>欢迎来到‘码世界’学习乐园</p>
    {{APP}}
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于标签下的内容统一订制。

注：默认模版和默认布局的区别：：
1. 默认模版----需要订制头部信息。默认布局-----不需要，只需要在 template 标签下订制内容及可，根布局有关联。
2. 默认模版----建立后需要重启服务器，否则显示不会成功。默认布局------不需要。

6、Nuxt的404错误页面设置和页面头部的meta标签设置

6.1 Nuxt的404错误页面设置

Nuxt.js支持直接在默认布局文件夹里建立错误页面。在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件

6.2页面头部的meta标签设置

meta标签的设置对搜索引擎非常重要，nuxt.js 可以直接使用head方法来设置当前页面的头部信息。

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

2、第一步完成后，修改/pages/news/_id.vue，让它根据传递值变成独特的meta和title标签。
代码如下：

<script>
export default {
    validate ({ params }) {
      //参数必须为数字，如果不是数字会页面报错
      return /^\d+$/.test(params.id)
    },
    data(){
      return {
        title:this.$route.params.title, //获取params传过来的title参数  
      }
    },
    //独立设置head信息
    head(){
      return {
        title:this.title,     //html页面 head头部title标签赋值
        meta:[
          /*
            html页面 head标签 内 meta标签设置, 此处hid 如果随意写,例如设置成 hide:'jfkdfjdkf',头部会有两个meat标签
            hid:'description' 表示覆盖，采用最新的。
          */
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

7、asyncData方法获取数据

nuxt.js 的异步请求数据，使用anyncData方法

// 假如你的JSON仓库地址是： https://api.myjson.com/bins/8gdmr
// 数据结构是下面这样的
{
    "name": "码世界",
    "age": 18,
    "interest": "I love WEB!"
}
1
2
3
4
5
6
7

Vue.js官方推荐使用的远程数据获取方式就Axios,安装axios

npm install axios --save
1

7.1asyncData的promise方法

我们在pages下面新建一个文件，叫做ansyData.vue。如下代码

<template>
    <div>
        <p>{{name}}</p>
        <p>{{info.name}}}</p>
        <p>{{info.age}}}</p>
        <p>{{info.interest}}}</p>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            name :'Hello World'
        }
    },
    //promise方法
    asyncData() {
        return axios.get('https://api.myjson.com/bins/8gdmr') 
        .then((res)=>{
            console.log(res);
            return {
                info : res.data         //相当于在data中添加了info字段
            }
        })
    },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

7.2ansycData的await方法

用ansyc…await来解决异步
代码如下:

//ansycData的await方法
async asyncData() {
    let { data } = await axios.get('https://api.myjson.com/bins/8gdmr');    //ES6解构赋值
    return { info : data}       //相当于在data中添加了info字段
}, 
1
2
3
4
5

8、nuxt静态资源和打包

8.1nuxt静态资源

为什么引入图片在本地可以显示，打包上线后不显示，因为nuxt 不能使用相对路径，使用“~”符号代替相对路径

<!-- 
  这种本地显示正确，打包后不显示
  <img src="static/logo.png"/> 
 -->
 <!-- 本地与服务器打包都显示 -->
 <img src="~static/logo.png"/>
1
2
3
4
5
6

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

<style>
  .diss{
    width: 300px;
    height: 100px;
    background-image: url('~static/logo.png')
  }
</style>
1
2
3
4
5
6
7

8.1打包静态HTML并运行

在当前开发项目终端运行

npm run generate
1

运行完成后会生成一个dist文件，把dist文件单独拷贝出来，打开里面的index.html文件，会发现里面有些内容不显示，这时单独把dist文件用vscode打开，在当前dist项目终端安装

npm install  live-server  -g
1

安装完成后，直接在当前dist项目终端输入 live-serve