说明：这是针对Vue cli 4.x的教程，与3.x有很大不同，所以特别整理。
说明：这是针对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></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/>
效果：
