您好,登錄后才能下訂單哦!
前端框架vue,在利用腳手架工具vue-cli創建前端項目時候,怎么引入組件呢?下面是詳細的寫法。
1、第一步,利用vue-cli創建一個vue前端項目,文件夾如下圖
2、第二步,例子是在hom.vue界面引入子組件header.vue,如下圖
3、第三步,給子組件header.vue命名一個全局的id,
export default { name: 'HomeHeader' }
代碼如下圖
4、第四步,返回home.vue組件,引用header.vue組件代碼如下圖
HomeHeader 對應上一步的命名;
首先引入界面
import HomeHeader from './pages/header'
然后渲染界面
export default {
name: 'home',
components: {
HomeHeader
}
}
5、第五步,進過引入界面和渲染界面后,可以在home.vue調用header.vue界面了,
<home-header></home-header>
對應HomeHeader大寫變小寫,連接處用-鏈接
如下圖
6、第六步,運行項目,打開網頁顯示,子組件引入成功,如下圖
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。