Nuxt.js 的详细使用以及踩的坑

我就是我 2022-12-11 04:21 269阅读 0赞

# Nuxt.js 的使用 #

# 安装 #

1、nuxt.js 基于 vue 因此使用 vue 进行项目创建，nuxt.js 官方提供一个模板，我们就以这个模板进行 nuxt 项目的创建。其创建代码为：

vue init nuxt-community/starter-template '你的项目名称'

回车之后会进行模板下载，**务必联网**；  
模板下载好之后，会让你填写一些基本信息，可以直接回车选择默认就好，如下图：  
![在这里插入图片描述][20201230095202126.png]

模板的目录结构如下：  
node\_modules 文件夹是需要我们安装依赖之后才有的；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70]  
2、安装依赖  
进入到项目根目录，依赖安装：

npm install

如果依赖安装成功则会出现以下图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 1]

3、运行 nuxt.js 项目  
经过以上两个步骤之后，我们就可以运行 nuxt.js 项目了；  
在项目根目录下，运行：

npm run dev

等待项目运行。。。。  
nuxt.js 项目成功运行会给出一个默认地址：http://localhost:3000/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 2]

把网址复制到页面中，就可以看到这样的一个页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 3]

这样，我们的 nuxt.js 项目就正式创建完成了，接下就是编码了；

# 目录结构讲解 #

.nuxt 里面是放置 nuxt 项目的配置信息，**最好不要动**  
assets 会放置一些静态资源，如 js 文件，SASS，LESS 文件等；  
components 专门放置页面中的组件；  
layouts 专门放置项目的模板；  
middleware 专门放置项目的中间件；  
pages 专门放置项目的页面；  
plugins 专门放置项目的插件；  
static 主要放置项目的静态资源，如图片；  
store 用于项目的 vuex 状态文件；  
**nuxt.config.js 项目的配置文件，比较重要；**  
package.json 里面主要是项目的依赖关系；

# 引入 Iconfont(阿里图标) #

1、将项目下载到本地（省略阿里图标库的项目创建和添加图标。。。）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 4]

2、解压之后将所有文件复制到项目中去  
我将图标文件放到 static 文件夹下，新建一个 font 文件夹，将所有解压的文件放到 font 中  
![在这里插入图片描述][20201230095304981.png]

3、图标配置  
在 nuxt.config.js 文件中进行图标的配置  
![在这里插入图片描述][20201230095316332.png]

4、图标在页面中的使用  
在代码中使用

图标在页面中的显示  
![在这里插入图片描述][20201230095323417.png]

# 引入 Element-UI #

1、使用 npm 进行 elemnt-ui 安装

npm i element-ui -S

2、在 plugins 文件夹下创建 element-ui.js 文件（plugins 文件夹是专门放插件的）  
在文件中进行全局引入

import Vue from 'vue'
    import ElementUI from 'element-ui'
    Vue.use(ElementUI);

3、在 nuxt.config.js 中添加配置

css: [
      'element-ui/lib/theme-chalk/index.css'  // 引入全局样式
    ],
     plugins: [
      { src: '~/plugins/ElementUI', ssr: false }
    ],
    build: { 
      vendor: ['element-ui'] // 防止重复打包
    }

4、测试一下看看是否可以  
在页面中使用

<el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>

页面中显示  
![在这里插入图片描述][20201230095333101.png]

# http 请求（简易用法） #

1、安装

npm install @nuxtjs/axios

2、nuxt.config.js 配置

module.exports = { 
      modules: [
        '@nuxtjs/axios',
      ],
      axios: { 
        baseURL: '需要请求的URL', // 如：http://www.baidu.com
      }
    }

3、在代码中使用

// 以 GET 为例，其他请求用法相同
    this.$axios.$get('后端给的接口').then(res => { 
      /* 在这里将值取出来 */
      console.log(res);
    });

# 项目打包和运行 #

1、进入到项目根目录下，用一下命令进行打包

npm run build

2、当控制台命令执行结束时，我们看到原来的项目目录结构并没有发生什么变化，这时我们将一下四个文件单独放到另外一个文件夹下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 5]

3、我们到那四个文件的根目录下运行安装依赖

npm install

安装之后的目录结构如下  
![在这里插入图片描述][20201230095357532.png]

4、在根目录下运行打包之后的 nuxt 项目

npm start

# 利于 SEO #

要想利于 SEO 就要在组件渲染之前就将数据获取到;  
因此页面的所有请求必须放在 asyncData 函数里面，这个函数是 Nuxt 框架独有的，专门为了 SEO 设计;  
该函数是在组件渲染之前就会执行，因此在这个函数内部是不能使用 this 关键字获取全局变量或方法；  
asyncData 官网介绍（[传送门][Link 1]）

简单实例：

/* 参数介绍： 只有一个参数时： asyncData(context)：该参数就是当前页面的上下文对象，也就是我们常用的 this 有多个参数时： asyncData({app, query, store})：默认第一个参数是上下文对象，当前这个例子中的第二个参数是获取别的页面传来参数，当前例子中的第三个参数是 状态管理 */
    
    async asyncData({ app, query, store}) { 
      // 两个请求
    	let [res1, res2] = await Promise.all([
            app.$http.getA(),
            app.$http.getB(),
      ])
     	// res1 res2 就是请求到的结果，还可以增加多几个请求。
      
      // 想要把该函数内的数据传出去，就要将数据通过 return 返回回去。return 返回的数据必须是json数据，并且键值必须在 data 内已经定义过的
      return { 
        id: aid,	// aid 是asyncData函数内的数据
        					// id 是把 aid 的值带出去
      }
    }
    
    注意：
    	当我们只有一个请求的使用，也要写 []
    	例：
      let [res1] = await Promise.all([
            app.$http.getA(),
      ])

注意：  
如果使用 setTimeout 来控制页面的延时显示，千万不要使用 v-if 来控制。

# 使用 swiper 巨坑 #

**首先声明：我没能完整的使用 swiper 官方的东西，我自己写了几个方法让它有了 轮播图 该有的样子，也可能是我没看懂 swiper 官网说的东西哈。**  
\*\*  
下面我说一下我自己怎么使用的 swiper ：

**1、安装**

npm install vue-awesome-swiper swiper --save

在这里我安装了两个，我们在网上常看到有些博主只安装了 vue-awesome-swiper，但是他们却还引入了 swiper 的 css 样式，无疑我这里是报错的，在这里我们安装两个

**2、配置**  
第一个配置：  
在 plugins 文件夹下我们新建一个文件，我们取名 swiper（名称随便取，不过尽量要见名知意哈），在 swiper 文件中我们这样配置：

import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    export default () => { 
      Vue.use(VueAwesomeSwiper)
    }

第二个配置：  
我们需要在项目的配置文件（nuxt.config.js）中进行配置

plugins: [
        { src: '~/plugins/vueAwesomeSwiper.js', ssr: false},
      ],

**配置完这两个才行**  
\*\*  
**3、使用**  
（我自己在使用的过程中遇到了很大的，查阅很多资料都没有弄好。。。）  
经过多次失败，我决定根据 swiper 内置的一个方法进行完善轮播

swiper 介绍了两种使用方法，我用的是这种方式，解释一波属性和方法：  
**ref**: （。。。不解释）  
**options**: swiper 的配置（我在设置的时候就没起作用）  
**slideChangeTransitionStart**: 这个方法是我们拖动轮播图进行翻页并成功翻页的时候触发的

因为翻页按钮和轮播下方的分页都没有显示成功，我自己又写了翻页按钮和分页。。。  
这两个我是放和 swiper 同级的

<div class="switch">
          <div class="prev" @click="pnEff('prev')"><i class="iconfont iconxiangzuo"></i></div>
          <div class="next" @click="pnEff('next')"><i class="iconfont iconarr-right1"></i></div>
        </div>
        
        <div class="pagination">
          <div class="child" :style="{'width': lunbo_fy_width+'%', 'transform': 'translateX('+lunbo_fy_left+'%)'}"></div>
        </div>

接下来是最 **重要** 的 js 代码  
computed 中的写法我是移用官方的  
我整个逻辑就使用了这 this.swiper.slideTo() 一个方法，该方法有3个参数，最后一个我们不用管，设为 false 就可以了  
this.swiper.slideTo:  
参1：表示移动到该下标去，下标从 0 开始  
参2：表示移动到该下标的时间，1000 为 1s  
我使用了一个定时器 和 这个方法结合，勉强能弄出了一个完整的轮播图出来

computed: { 
          swiper() { 
            return this.$refs.mySwiper.$swiper;
          }
        },
        mounted() { 
          this.lunboInit();
          this.lunbo_fy_width = (1 / this.dat.length) * 100;
        },
        methods: { 
          // 初始化轮播图
          lunboInit() { 
            const that = this;
            this.lunbo = setInterval(()=>{ 
              that.lunbo_index++;
              if(that.lunbo_index >= that.dat.length) { 
                that.lunbo_index = 0;
              }
              that.swiper.slideTo(that.lunbo_index, that.lunbo_speed * 1000, false);
              that.yfMove();
            }, this.lunbo_time * 1000)
          },
          // 轮播图翻页按钮
          pnEff(flag) { 
            // console.log(this.lunbo_index)
            let that = this;
            // 消除定时
            clearInterval(this.lunbo);
            if(flag == 'prev') { 
              that.lunbo_index --;
              if(that.lunbo_index < 0) { 
                that.lunbo_index = that.dat.length - 1;
              }
            }
            else if(flag == 'next') { 
              that.lunbo_index ++;
              if(that.lunbo_index >= that.dat.length) { 
                that.lunbo_index = 0;
              }
            }
            that.swiper.slideTo(that.lunbo_index, that.lunbo_speed * 1000, false);
            this.yfMove();
            // console.log(this.lunbo_index)
            // 轮播切换之后等待指定时间再次启动
            this.lunboInit();
          },
          // 轮播图分页移动
          yfMove() { 
            this.lunbo_fy_left = this.lunbo_index * 100;
          },
          // 滑动轮播图时触发
          slideChangeTransitionStart(swiper) { 
            // console.log(swiper.activeIndex)
            this.lunbo_index = swiper.activeIndex;
            this.yfMove();
          },
        }

完整的代码，这是一个完整的组件，安装上面的步骤配置好，直接把下面的代码复制过去，修改图片路径就可以直接使用了

<template>
      <div class="lunbo">
        <swiper ref="mySwiper" :options="swiperOption" @slideChangeTransitionStart="slideChangeTransitionStart">
          <swiper-slide v-for="(item,index) in dat" :key="index">
            <img :src="item.url" class="img1" />
          </swiper-slide>
        </swiper>
        
        <div class="switch">
          <div class="prev" @click="pnEff('prev')"><i class="iconfont iconxiangzuo"></i></div>
          <div class="next" @click="pnEff('next')"><i class="iconfont iconarr-right1"></i></div>
        </div>
        
        <div class="pagination">
          <div class="child" :style="{'width': lunbo_fy_width+'%', 'transform': 'translateX('+lunbo_fy_left+'%)'}"></div>
        </div>
      </div>
    </template>
    
    <script>
      export default { 
        data () { 
          return { 
            // 模拟数据
            dat: [
              { 
                url: require('~/static/A/pro-1.jpg')
              },
              { 
                url: require('~/static/A/pro-2.jpg')
              },
              { 
                url: require('~/static/A/pro-3.jpg')
              }
            ],
            // swiper 轮播设置
            swiperOption: { 
              pagination: '.swiper-pagination',
            },
            // 轮播图的对象
            lunbo: '',
            // 轮播图当前位置，从 0 开始
            lunbo_index: 0,
            // 轮播图切换的时间，单位：秒（S）
            lunbo_time: 4,
            // 轮播图的切换速度，单位：秒（S）
            lunbo_speed: 1,
            // 轮播图分页每项的宽度
            lunbo_fy_width: 0,
            // 轮播图分页项的左边距
            lunbo_fy_left: 0,
          }
        },
        computed: { 
          swiper() { 
            return this.$refs.mySwiper.$swiper;
          }
        },
        mounted() { 
          this.lunboInit();
          this.lunbo_fy_width = (1 / this.dat.length) * 100;
        },
        methods: { 
          // 初始化轮播图
          lunboInit() { 
            const that = this;
            this.lunbo = setInterval(()=>{ 
              that.lunbo_index++;
              if(that.lunbo_index >= that.dat.length) { 
                that.lunbo_index = 0;
              }
              that.swiper.slideTo(that.lunbo_index, that.lunbo_speed * 1000, false);
              that.yfMove();
            }, this.lunbo_time * 1000)
          },
          // 轮播图翻页按钮
          pnEff(flag) { 
            // console.log(this.lunbo_index)
            let that = this;
            // 消除定时
            clearInterval(this.lunbo);
            if(flag == 'prev') { 
              that.lunbo_index --;
              if(that.lunbo_index < 0) { 
                that.lunbo_index = that.dat.length - 1;
              }
            }
            else if(flag == 'next') { 
              that.lunbo_index ++;
              if(that.lunbo_index >= that.dat.length) { 
                that.lunbo_index = 0;
              }
            }
            that.swiper.slideTo(that.lunbo_index, that.lunbo_speed * 1000, false);
            this.yfMove();
            // console.log(this.lunbo_index)
            // 轮播切换之后等待指定时间再次启动
            this.lunboInit();
          },
          // 轮播图分页移动
          yfMove() { 
            this.lunbo_fy_left = this.lunbo_index * 100;
          },
          // 滑动轮播图时触发
          slideChangeTransitionStart(swiper) { 
            // console.log(swiper.activeIndex)
            this.lunbo_index = swiper.activeIndex;
            this.yfMove();
          },
        }
      }
    </script>
    
    <style lang="scss" scoped>
    .lunbo { 
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    
      div { 
        overflow: hidden;
      }
    
      img { 
        width: 100%;
        min-height: 100%;
      }
    
      .switch { 
        width: 100%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        top: 50%;
        padding: 0 10px;
        left: 0;
        color: #0077AA;
        >div { 
          z-index: 999;
          cursor: pointer;
        }
        i { 
          font-size: 2em;
        }
      }
    
      .pagination { 
        width: 100%;
        height: 3px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        left: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 999;
    
        .child { 
          background-color: #0077AA;
          transition: all 0.5s;
        }
      }
    }
    </style>

# nuxt 项目去掉页面源代码 window.**NUXT** #

之前在网上看到很多大佬说 **屏蔽** 掉3行代码可以达到效果，不过会出现一些问题，像 store 。。。。  
通过摸索，我发现 \*\*屏蔽 \*\*这一行代码也可以达成去掉页面源代码 xindow.\_ *NUXT*\_ 的效果，可能项目功能比较小，因此并未发现项目出现问题。  
node\_modules/@nuxt/vue-renderer/dist/vue-renderer.js  
搜索：$\{serializedSession\}

\*\*这个文件必须是在服务器上的文件  
\*\*  
**后续持续观察，如发现问题，立即更新。。。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 6]

# 注意 #

1、根目录使用 “~” 来表示。例如需要引入 static 中的图片，则路径为："~/static/…"

2、项目根目录下的 .nuxt 文件夹，如果没有特别需求，最好不要修改里面的内容。（我之前有过修改里面的内容，当项目重新编译的时候，里面的内容又重新刷新且覆盖）

3、在使用变量进行 *img(图片) 的 src 绑定时，路径必须使用 require() 函数进行处理，如：require(’~/static/image/bg.png’)*  
\_  
*4、在使用 layout（模板）时，有一个小小需要注意的地方：*  
*在 A 中，使用 layout，在 B 中引入 A，则模板不会编译有，但是直接打开 A 是有的。如果需要在 B 也显示模板，只能在 B 中也设置模板*  
\_  
\_5、在\_页面中监听 vuex 里面的变量时  
如果在是这样写的，这样调用 methods 中的方法，会报错。当我们打印 this 对象时，可以看出不存在 this

watch: { 
      getID: (n) => { 
        console.log('watch', n);
        this.getCategoryID(n)
      }
    },

这样写就可以了

watch: { 
      getID(n) { 
        console.log('watch', n);
        this.getCategoryID(n)
      }
    },

6、在更换接口的时候，需要修改两个文件 config.js（为统一管理api域名而自定义的文件，如果没有的话，就只需要改变 nuxt.config.js 即可） 和 nuxt.config.js  
其中 nuxt.config.js 要修改的地方如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 7]

**持续更新中。。。**

[20201230095202126.png]: /images/20221123/d16519be456d4b88be3f2dee981a7ed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70]: /images/20221123/74d4a358e5684fbbbb39980da473a6b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 1]: /images/20221123/c14350370e47453c999a1527924d9691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 2]: /images/20221123/19b95c29e6144d31b054752a3cee4854.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 3]: /images/20221123/8e14f011e95848d892de81635f046237.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 4]: /images/20221123/96d87a04cb734686af3b3e20f283de02.png
[20201230095304981.png]: /images/20221123/ba58e008b85246e6a2670af5dde2d7ca.png
[20201230095316332.png]: /images/20221123/621103eba2b541d0b0ef86e0f5fd2fb1.png
[20201230095323417.png]: /images/20221123/5edf53b2fb564ce9bf89b291f7695eb7.png
[20201230095333101.png]: /images/20221123/b68df2df8fe045e6a04e219735f81ac7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 5]: /images/20221123/976d6a21ab464b739d8ccd5fc9da9b04.png
[20201230095357532.png]: /images/20221123/1ff173df90594a33bffccddef250b6d9.png
[Link 1]: https://zh.nuxtjs.org/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 6]: /images/20221123/30b60d88d42442f1a96e68d80249bed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70 7]: /images/20221123/b4f31ccfd5ce4c6298ecaa1f48987842.png