自定义全局组件

　　全局组件（插件）：就是指可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就都可以使用了，如vue-router

• import VueRouter from 'vue-router'
• Vue.use(VueRouter)

　　普通组件（插件）：每次使用时都要引入，如axios

• import axios from 'axios'

 

• 定义组件

<template>
	<div id="login">
		{{msg}}
	</div>
</template>

<script>
	export default {
		data(){
			return {
				msg:'用户登陆'
			}
		}
	}
</script>

<style scoped>
	#login{
		color:red;
		font-size:20px;
		text-shadow:2px 2px 5px #000;
	}
</style>

　　

• 注册为全局组件 index.js

import Login from './Login.vue'

export default {
	install:function(Vue){
		Vue.component('Login',Login);
	}
}

　　

• main.js中全局引入

import Vue from 'vue'
import App from './App.vue'

import Login from './components/user'

Vue.use(Login);

new Vue({
  el: '#app',
  render: h => h(App)
})

　　

• App.vue调用

<template>
  <div id="app">
    <Login></Login>
  </div>
</template>

　　

　　另外Element UI是饿了么提供的全局组件，[官网](http://element.eleme.io/)

 

　　安装

• npm install element-ui -S

 

　　在main.js中引入并使用组件

　　　　import ElementUI from 'element-ui'

　　　　import 'element-ui/lib/theme-chalk/index.css'

　　　　import lang from 'element-ui/lib/locale/lang/en'

　　　　import locale from 'element-ui/lib/locale'

　　　　Vue.use(ElementUI)

 

　　在webpack.config.js中添加loader

　　　　CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader css-loader

　　　　默认并没有style-loader模块，所以需要单独安装

　　　　　　npm install style-loader --save-dev