import Vue from "vue";
import App from "./App.vue";

// 注册全局组件
import TypeNav from "@/components/TypeNav";
Vue.component(TypeNav.name, TypeNav);

import Carousel from "@/components/Carousel/Carousel.vue"
Vue.component(Carousel.name, Carousel)

import Pagination from "@/components/Pagination"
Vue.component(Pagination.name, Pagination)

//引入仓库啊
import store from "@/store/index.js";

// 引入所有的接口文件 供全局使用 API是一个对象
import * as API from '@/api/login.js';

// 按需引入element-ui弹框,表单
import { MessageBox, Message, Form, FormItem, Input, InputNumber } from 'element-ui';
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$message = Message;
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(InputNumber);

// 引入mockSever.js--mock数据
import "@/mock/mockServer.js"

//引入swiper样式
import "swiper/css/swiper.css"

Vue.config.productionTip = false;

// 引入路由组件
import router from "@/router";

// 引入路由懒加载插件
import VueLazyload from 'vue-lazyload'
import whl from '@/assets/whl.gif'  //json，图片都是对外暴露  gif是动图
// 注册插件
Vue.use(VueLazyload, {
	// 懒加载默认的图片
	loading: whl
})

// 引入自定义指令插件
import myPlugins from '@/plugins/myplugins'
// {} 是传入该值
Vue.use(myPlugins, {
	name: 'upper'
})


// 引入表单验证插件
import '@/plugins/validate'
new Vue({
	render: (h) => h(App),
	router,
	// 注册仓库：组件实例身上会多一个属性$store属性
	store,
	// 全局事件总线$bus配置 this指向的是Vm
	beforeCreate() {
		Vue.prototype.$bus = this
		// 给Vue原型链添加全局事件总线 所有组件都能够使用$API属性,获取接口
		Vue.prototype.$API = API
	}
}).$mount("#app");
