vue CLIで共通のコンポーネント作成

https://qiita.com/yuta-38/items/996db89bcfa47c738c12

①コンポーネントを用意（src/components/CommonFooter.vue)

<template>
 <div class="footer-cover container-fluid">
   <div class="container">
     <div class="row">
       <div class="col-sm-10 logoInfo">
         <div class="footerLogo">
           <img src="/images/logo_white.png" alt="logo" />
         </div><!--footerLogo-->
         <div class="footerInfo">
           <ul>
             <li>〒506-0011 岐阜県高山市本町4丁目36番地</li>
             <li>電話番号：<a href="tel:0577-57-5118">0577-57-5118</a></li>
             <li>営業時間：11:00-23:00 [LO. 22:30]</li>
             <li>定休日：火曜日</li>
           </ul>
         </div><!--footerInfo-->
       </div><!--col-sm-10 logoInfo-->
       <div class="col-sm-2 footerMenu">
         <ul>
           <li><a href="#header-logo">Home</a></li>
           <li><a href="#news-id">News</a></li>
           <li><a href="#concept-id">Concept</a></li>
           <li><a href="#visual-id">Visual</a></li>
           <li><a href="#menu-id">Menu</a></li>
           <li><a href="#shopInfo-id">Shop information</a></li>
           <li><a href="#access-id">Access</a></li>
         </ul>
       </div><!--col-sm-2 footerMenu-->
         <div class="col-sm-12 copyRight">
             2019© TSUG CAFE, All Rights Reserved.
         </div><!--col-sm-12 copyRight-->
     </div><!--row-->
   </div><!--container-->
 </div><!--footer-cover-->
</template>

<script>
export default {
 name: 'CommonFooter',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer-cover{
	background-color: #333333;
	padding-top: 25px;
}
@media(max-width:960px){
	.footerLogo{
		padding-bottom:5vh;
	}
}
.logoInfo{
	display: flex;
}
@media(max-width:960px){
	.logoInfo{
		display:block;
	}
}
.footerInfo ul li,.footerMenu ul li{
	color:#fff;
	font-size:1.6rem;
	padding-left:55px;
   line-height: 1.8;
}
@media(max-width:960px){
	.footerInfo ul{
		margin-bottom:7vh;
	}
	.footerInfo ul li{
		padding:0;
	}
	.footerMenu ul{
		margin-bottom:7vh;
	}
	.footerMenu ul li{
		line-height:1.3;
       padding-left: 0;
	}
}

.footerInfo ul li a,
.footerMenu ul li a{
	color:#fff!important;
	font-size:1.6rem;
}

.copyRight{
	color:#fff;
	font-size:1.3rem;
	text-align: center;
	padding-bottom: 17px;
}

</style>

※ここで全角スペースがあるとエラーになるので注意！

https://qiita.com/kokogento/items/881ff2f8fd1ab5d56184

②src/App.vue で呼び出し

<template>
 <div id="app">
   <HelloWorld />
   <CommonFooter/>　★ここで読込
 </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import CommonFooter from '@/components/CommonFooter.vue'　★ここで読込


export default {
 components: {
   HelloWorld,
   CommonFooter　★ここで読込
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

画像パス

publick内に配置した画像ファイルはプロジェクトルートにそのまま移動されます。特に意識せずに普通のパスでOK.

<img src="/images/logo_white.png" alt="logo" />

https://webrandum.net/vue-cli-image-path/