map mixins混入 Vue轮播图

1.VUE的swiper轮播步骤：

第一步：

安装依赖npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

第二步：

全局安装

在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

/* 在node_modules里面找到swiper文件夹里面的css文件 */

import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */

Vue.use(VueAwesomeSwiper)

★ 复制下面的代码在vscode中会出现word格式黄色空格，

需要自己删掉，建议手敲下面的代码

第三步：

在自己的组件文件夹中新建一个轮播图组件MySwiper.vue：

并复制以下代码到你的组件中：

把组件引用到app.vue文件中去：

need-to-insert-img

2.mixins混入：

App.vue文件

main.js文件：

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

Vue.config.productionTip = false

/* 全局混入 谨慎使用 会影响每个单独创建的Vue实例

   大多情况下*/

Vue.mixin({

  created:function(){

    console.log('全局init');

  }

})

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

AboutView.vue文件：

src下新建文件夹mixins,再创建mixinsA.js文件：

/* 把公共内容放minxinsA.js文件中 */

export default {

    data:function(){

        return{

          msg:'vue基础要学完啦'

        }

      },

      created(){

        console.log(this.msg);

      },

      methods:{

        fn:function(){

          alert(this.msg)

        }

      }

}

3.辅助函数操作模块数据：

App.vue文件：