说明：这是针对Vue cli 4.x的教程，与3.x有很大不同，所以特别整理。

一、首先检查版本

\\\\
 \\\\                          ____                         ____  _          _     _
  \\\\  Zoomla!逐浪CMS出精品  |  _  \_____      __ __ ____ / ___|| |     ___| |   | |
  ////   -> www.z01.com       | |_) / _ \ \ /\ / / _ \  __'\__  \| |__ /  _ \ |   | |
 ////  商城|ERP|字库|高端门户 |  __/ (_) \ V  V /  __/ |   ___) /|  _  \  __/ |___| |___
////      Only Do Best!       |_|   \___/ \_/\_/ \___|_|  |____/ |_| |_|\___|_____|_____|    ^_^
PS C:\Users\admin> vue -V
@vue/cli 4.1.2

二、创建并引入一个组件

2.1、创建组件

vue-cli中的所有组件都是存放在components文件夹下面的，所以在components文件夹下面创建一个名为First.vue的自定义组件：

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>

// 1、export 表示导出,在自定义组件里面使用export default导出 
export default { // name 表示设置别名，可以不设置，建议和组件的名称一致
 name:"First",
    data(){ return{
            msg:"First Vue" }
    }
} </script>

2.2、在main.js里面引用First.vue组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import First from './components/common/First'


Vue.config.productionTip = false
Vue.component('First', First)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

二、引入嵌套组件

在任意的views目录下的任意vue文件中直接引用就可以了，如：
<First></First>
<First/>

效果：

QQ截图20200211090255.jpg