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组件部分

 5、js部分：swiper官方文档

export default {
    data(){
        return {
            banners: [ '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg', '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg', '//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg','//cdn.cnbj0.fds.api.mi-img.com/b2c-bbs-cms/2018/0929/20180929071037605.jpg'],
            // 所有配置均为可选（同Swiper配置）  
            swiperOption: {
                loop: true,
                speed:500,
                // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    slideChange() {
                    // console.log('onSlideChangeEnd', this);
                    },
                    tap() {
                    // console.log('onTap', this);
                    }
                },
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
                autoplayDisableOnInteraction:false,
                // effect:'cube',
                mousewheel: true,
                preloadImages: false,
                lazy: true
            }
        }
    },
    swiper() {
        // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
        return this.$refs.swiperBox.swiper
    },
    methods:{
        stopSwiper(){
            this.swiper.autoplay.stop()
        },
        startSwiper(){
            this.swiper.autoplay.start()
        }
    }
}

• 安装mint-ui

1.安装 

npm install mint-ui --save

2.全局配置：
plugins目录下 增加 mint-ui.js

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

在nuxt.config.js

plugins: [
  { src: "@/plugins/mint-ui", ssr: true }, //ssr:false,npm run build打包样式丢失，这里为true
],

3.使用

this.$toast({
    message: '提示',
    position: 'bottom',
    duration: 5000
});

 

• vue-video-player

github地址：https://github.com/surmon-china/vue-video-player
1.安装 

npm install vue-video-player --save

2. 新建插件plugins：vue-video-player.js

import Vue from 'vue'

const VueVideoPlayer = require('vue-video-player/dist/ssr')

Vue.use(VueVideoPlayer)

3.nuxt.config.js配置

 css: [
  'video.js/dist/video-js.css'，
],

plugins: [
  { src: "@/plugins/vue-video-player", ssr: false },
],

4.使用

• nuxt 全局方法、全局变量

1.在plugins 文件夹里新增一个 commom.js

import Vue from 'vue'
var comsys= {
    install(Vue){
        Vue.prototype.comsys = {
        	val:function(val){
        		return val
        	}
        };
        
    }
}
Vue.use(comsys);

2.nuxt.config.js里  添加

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

3.使用

mounted () {
			 console.log(this.comsys.val(1));
		}

• 使用百度统计

1.在nuxt项目中plugin目录下新建baidu.js文件

2.在baidu.js文件中添加下面的代码

export default ({ app: { router }, store }) => {
  router.afterEach((to, from) => {
    /* 告诉增加一个PV */
    try {
      window._hmt = window._hmt || []
      window._hmt.push(['_trackPageview', to.fullPath])
    } catch (e) {}
  })
}

3.在nuxt.config.js文件中添加下面的代码 (百度统计代码code)

script: [
      { src: 'https://hm.baidu.com/hm.js?***' }
    ]

在plugins中：

 plugins: [
    {src: '~/plugins/baidu.js'}
  ]

参考：https://blog.csdn.net/webofrxy/article/details/83713233