前端框架vue，在利用腳手架工具vue-cli創(chuàng)建前端項(xiàng)目時(shí)候，怎么引入組件呢？下面是詳細(xì)的寫(xiě)法。

1、第一步，利用vue-cli創(chuàng)建一個(gè)vue前端項(xiàng)目，文件夾如下圖

2、第二步，例子是在hom.vue界面引入子組件header.vue，如下圖

3、第三步，給子組件header.vue命名一個(gè)全局的id，

export default { name: 'HomeHeader'}

代碼如下圖

4、第四步，返回home.vue組件，引用header.vue組件代碼如下圖

HomeHeader 對(duì)應(yīng)上一步的命名；

首先引入界面

import HomeHeader from './pages/header'

然后渲染界面

export default {

name: 'home',

components: {

HomeHeader

}

}

5、第五步，進(jìn)過(guò)引入界面和渲染界面后，可以在home.vue調(diào)用header.vue界面了，

<home-header></home-header>

對(duì)應(yīng)HomeHeader大寫(xiě)變小寫(xiě)，連接處用-鏈接

如下圖

6、第六步，運(yùn)行項(xiàng)目，打開(kāi)網(wǎng)頁(yè)顯示，子組件引入成功，如下圖