nuxt第三方插件（px2rem,mint-ui,swiper,video,百度统计）

 

• 安装px2rem

首先下载flexible.js
可加载阿里的cdn文件 http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
将下载好的文件放到static也就是静态资源文件中
1.安装：npm install --save postcss-px2rem
2.在nuxt.cofig.js中
在head上

script: [
   { src: '/js/flexible.js', type: 'text/javascript', charset: 'utf-8'}

//build加上

postcss: [
   require('postcss-px2rem')({
     remUnit: 75
   })
],

//或者 Using an Array as build.postcss will be deprecated in Nuxt 3. Please switch to the object declaration (repeated 11 times)
postcss: {
    'postcss-px2rem': {
        remUnit: 75,
    },
},

参考：https://blog.csdn.net/kingov/article/details/79827613

• 安装 vue-awesome-swiper

1.安装

npm install vue-awesome-swiper --save

2、在 plugins 目录下新建vue-swiper.js文件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

3、在 nuxt.config.js 文件中写入

  css: [
    { src: "swiper/dist/css/swiper.css" }
  ],
  
  
  plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

4、vue组件部分

<div class="swiper swiperBox" v-swiper:swiper="swiperOption" ref="swiperBox" @mouseenter="stopSwiper" @mouseleave="startSwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(banner,i) in banners" :key="i">
            <img :src="banner">
        </div>
    </div>
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="