Nuxt.js小结

一、解决安装less，less-loader插件报错问题

 安装命令：

npm install less less-loader --save-dev 

以上报错我也不清楚是什么原因导致的，网上说可能是因为less-loader版本和webpack版本冲突了，最后就只能降低less-loader和webpack的版本。

npm install less-loader@6.0.0 -D

npm install webpack@4.0.0  

二、路由中间件

1、创建middleware目录；

2、在middleware目录下新建一个js文件，编写中间件代码；

// middleware.js文件
 
export default function({ req, redirect, route }) {
    // 使用User-Agent检测判断设备类型
    let userAgent = req.headers['user-agent'] || navigator.userAgent;
    let isMobile = /mobile/i.test(userAgent);
 
    // 根据设备类型判断重定向到pc端或者mobile端
    let newPath = isMobile ? route.path.replace(/pc/i, 'mobile') : route.path.replace(/mobile/i, 'pc');
    // 检查新的路径是否与当前的路径相同（没有if判断的话，会导致重定向进入死循环状态）
    if (newPath === route.path) return;
    redirect(newPath);
}

（代码仅供参考，具体根据项目中router.js的路由配置编写）

3、在nuxt.config.js中注册； 

// nuxt.config.js文件
 
export default {
    ... // 其他文件配置
 
    router: {
        middleware: 'middleware'
    },
 
    ... // 其他文件配置
}

到这一步就算是完成了。每次切换路由的时候都会触发运行 middleware.js 中间件的逻辑代码。

虽然这样写了进入页面后重定向到/index/pc/about路由下，但是在移动端会触发中间件强制重定向到/index/mobile/about路由下；

这样做适配pc端和m端就方便了许多。。。

 三、配置初始化字体大小

1、在 plugins 目录下新建rem.js文件，写入代码：

/**
 * 根据设计稿初始化字体大小
 * pc端: 1920px  m端: 750px
 */

// 隔离作用域，避免全局变量污染
!(function(e) {
    function setHtmlFontSize() {
        // 根据设备类型判断终端（pc \ m）
        let isMobile = navigator.userAgent.toLowerCase().match(/mobile/i) == 'mobile';
        let scale = 100 / (isMobile ? 375 : 1920); // 为了方便后续计算尺寸，这里以100px为默认值
        let bodyWidth = document.documentElement.getBoundingClientRect().width; // 当前窗口的宽度
        let rem = bodyWidth * scale; // 以默认比例 * 当前窗口宽度，得到当前宽度下的相应font-size值
        document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
    }
    setHtmlFontSize();

    window.addEventListener('resize', () => {
        // 这里使用setTimeout是为了解决在iphone上的闪屏情况
        setTimeout(() => setHtmlFontSize(), 100);
    })
})();

（同样代码仅供参考！！！）

 2、引入rem.js文件

plugins 目录下的js文件都需要在nuxt.config.js中引入才能在组件中使用；

// nuxt.config.js文件
 
export default {
    ... // 其他文件配置
    plugins: [
        { src: '@/plugins/rem', ssr: false } 
    ],
 
    router: {
        middleware: 'middleware'
    },
 
    ... // 其他文件配置
}

我不需要在服务端渲染，所以这个就设置了ssr: false的属性。

这样组件中的1rem就等于100px；改变窗口大小的同时，字体大小也会随之一起改变。

四、使用wowjs和animate.css 

 1、安装命令：

npm install wowjs animate.css

2、打开nuxt.config.js文件；在head配置项的link数组中 添加animate.css的CDN：

head: {
    link: [
      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css' }
    ]
  }

3、在需要应用动画效果的页面或组件中，导入wowjs和animate.css。

 我的项目使用import引入会报错，所以我改用在mounted中使用require的方式进行引入;

<script>
import 'animate.css';

export default {
  mounted() {
    const WOW = require('wowjs');

    if(process.client) {
      const wow = new WOW.WOW();
      wow.init();
    }
  }
}
</script>

4、确保在需要应用动画的元素上添加相应的类名，例如：

<template>

  <div class="index">

    <div class="wow animate__animated animate__fadeInUp">Hello World!</div>

  </div>

</template>

最后请注意，这只是在nuxt.js项目中使用wowjs和animate.css的一种方法，确保根据你的项目结果和需求进行适当的调整。 

 五、i18n国际化

@nuxt/i18n 是Nuxt.js内置封装的插件，可以轻松实现多语言支持，并根据用户的语言偏好显示相应的内容。

1、安装命令：

npm install @nuxtjs/i18n

2、 配置语言包

在assets目录下创建lang目录（没有assets目录的可自行创建），然后在lang目录下创建所需要的语言包；

 3、配置i18n

在plugins目录下创建i18n.js文件，写入一下代码

 4、把i18n配置到nuxt.config.js中

// nuxt.config.js

import i18n from './plugins/i18n';

expport default {
    ...其他配置

    plugins: [
        '@/plugins/i18n'
    ],
    modules: [
        [ '@nuxtjs/i18n', i18n ]
    ]

    ...其他配置
}

5、使用i18n

组件中需要通过 $t('') 使用即可；

<span>{{ $t('footer.contacts.time') }}</span>

六、使用vuex状态管理

nuxt框架帮我们封装好了vuex所以就不需要再次安装了。创建项目后会自动生成一个store目录，直接在当前目录下新建index.js进行配置即可。

1、引入vue和vuex并注册

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

2、创建store实例，并配置state、mutations、actions

const store = () => new Vuex.Store({
	state: {
		count: 0
	},
	
	mutations: {
		add(state, number) {
			state.count = number;
			console.log(state.count); // 打印结果为1
		}
	},
	
	actions: {
		add({ commit }, number = 1) {
			commit('add', number);
		}
	}
})

3、暴露store实例