Vue2.0自定义全局组件

1.首先搭建好vue-cli脚手架

自动生成后删除不需要的代码,下面是我的文件路径
image.png

2.这里是components / loading / Loding.vue文件里面内容

<template>
    <div class="loading_box">{{msg}}</div>
</template>
<script>
    export default{
        data(){
            return{
                msg:'Loading…'
            }
        }
    } 
</script>
<style scoped>
.loading_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 5rem;
    color: royalblue;
}
</style>

3.这里是components / loading / index.js文件里面内容

import LoadingComponent from './Loading.vue';
const Loading={
        install:function (Vue){
            Vue.component('Loading',LoadingComponent)
        }
}
export default Loading

index.js导出组件,里面需要install  

4.这里是main.js文件里面内容

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

import Loading from './components/loading';   //默认情况下找的是index文件
Vue.use(Loading);   //必须有install

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

5.这个时候在App.vue里面写上组件名称

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

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  }
}
</script>

这里面只是简单加了一个 <Loading></Loading> 组件

6.这个时候npm run dev 跑起来就能看见了 效果了

image.png

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 421,175评论 153 915
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 5,859评论 4 44
  • 梦到自行车的次数应该是最多的。 但是自行车对我来说一直是会骑却一直不敢上马路的, 极有可能成为马路杀手。 可能这已...
    知我欲言阅读 114评论 0 0
  • 1.分离视频音频流 ffmpeg -i input_file -vcodec copy -an output_fi...
    XLAccount阅读 2,371评论 0 8
  • 海莎分享3 下午看了《东方快车谋杀案》,认为这是部很不错的悬疑电影了。不剧透,就不过多描述情节,虽然我也是看了知乎...
    杨啥啥阅读 89评论 2 0
  • 迫不急待推荐好书~ 这次出差路途上看完寻路中国,一个外国人眼里的变化中的中国,不同的视角,深刻的观察,犀利的语言,...
    兮兮0225阅读 27评论 0 0