使用别人的组件：
比如:Vue.use(Vuesource);
Vue.use(VueRouter);
Vue.use(MintUI);
1.自定义全局组件：
使用
<Loading></Loading>
2.main.js
1 import Vue from 'vue'
2 import App from './App.vue'
3
4 import Loading from './components/loading'
5
6 Vue.use(Loading)
7
8 new Vue({
9 el: '#app',
10 render: h => h(App)
11 })
App.vue
1 <template>
2 <div id="app">
3 <h3>welcome vue-loading</h3>
4 <Loading></Loading>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: 'app',
11 data () {
12 return {
13 msg: 'Welcome to Your Vue.js App'
14 }
15 }
16 }
17 </script>
18
19 <style>
20 #app {
21 font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 -webkit-font-smoothing: antialiased;
23 -moz-osx-font-smoothing: grayscale;
24 text-align: center;
25 color: #2c3e50;
26 margin-top: 60px;
27 }
28
29 h1, h2 {
30 font-weight: normal;
31 }
32
33 ul {
34 list-style-type: none;
35 padding: 0;
36 }
37
38 li {
39 display: inline-block;
40 margin: 0 10px;
41 }
42
43 a {
44 color: #42b983;
45 }
46 </style>
index.js
1 import LoadingComponent from './Loading.vue'
2
3 const Loading = {
4 install: function(Vue) {
5 Vue.component('Loading', LoadingComponent)
6 }
7 };
8
9 export default Loading
Loading.vue
1 <template>
2 <div class="loader">
3 <div class="loader-inner ball-spin-fade-loader">
4 <div></div>
5 <div></div>
6 <div></div>
7 <div></div>
8 <div></div>
9 <div></div>
10 <div></div>
11 <div></div>
12 </div>
13 </div>
14 </template>
15 <style scoped>
16 .loader{
17 width:80px;
18 height: 80px;
19 margin:50px auto;
20 }
21 @keyframes ball-spin-fade-loader {
22 50% {
23 opacity: 0.3;
24 -webkit-transform: scale(0.4);
25 transform: scale(0.4); }
26
27 100% {
28 opacity: 1;
29 -webkit-transform: scale(1);
30 transform: scale(1); } }
31
32 .ball-spin-fade-loader {
33 position: relative; }
34 .ball-spin-fade-loader > div:nth-child(1) {
35 top: 25px;
36 left: 0;
37 -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
38 animation: ball-spin-fade-loader 1s 0s infinite linear; }
39 .ball-spin-fade-loader > div:nth-child(2) {
40 top: 17.04545px;
41 left: 17.04545px;
42 -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
43 animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
44 .ball-spin-fade-loader > div:nth-child(3) {
45 top: 0;
46 left: 25px;
47 -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
48 animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
49 .ball-spin-fade-loader > div:nth-child(4) {
50 top: -17.04545px;
51 left: 17.04545px;
52 -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
53 animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
54 .ball-spin-fade-loader > div:nth-child(5) {
55 top: -25px;
56 left: 0;
57 -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
58 animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
59 .ball-spin-fade-loader > div:nth-child(6) {
60 top: -17.04545px;
61 left: -17.04545px;
62 -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
63 animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
64 .ball-spin-fade-loader > div:nth-child(7) {
65 top: 0;
66 left: -25px;
67 -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
68 animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
69 .ball-spin-fade-loader > div:nth-child(8) {
70 top: 17.04545px;
71 left: -17.04545px;
72 -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
73 animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
74 .ball-spin-fade-loader > div {
75 background-color: #399;
76 width: 15px;
77 height: 15px;
78 border-radius: 100%;
79 margin: 2px;
80 -webkit-animation-fill-mode: both;
81 animation-fill-mode: both;
82 position: absolute; }
83 </style>
运行结果：引入了自定义组件loading
