vue-cli 組件的導(dǎo)入與使用教程詳解
概述：
一個(gè)文件就是一個(gè)模塊，需要引入模塊，和暴露模塊的方法
在一個(gè)組件中使用另一個(gè)組件三部曲：引入組件、注冊(cè)組件、使用組件
1.main.js文件解讀
.是整個(gè)項(xiàng)目的入口文件,在src文件夾下
.import（es6）引入vue和根組件app.vue
.最后new Vue，啟動(dòng)應(yīng)用
2、組件的使用
.定義的組件一般放到components目錄下
.用一個(gè)組件的過(guò)程
a .被引用的文件暴露對(duì)象(如果組件中沒(méi)有script，可以不需要暴露)
b. 父組件引入子組件，注冊(cè)組件（全局組件不需要引入），使用組件
擴(kuò)展：import
import OO from XX
1.import相當(dāng)于var、let去聲明一個(gè)變量OO（自定義，解構(gòu)賦值都可以）
2.from：引入哪個(gè)文件
.如果是自己定義的文件，一定要寫(xiě)相對(duì)路徑‘./'
.如果引入node——modules下的文件不需要寫(xiě)
import 變量 from ‘模塊路徑
import {解構(gòu)賦值} from ‘模塊路徑
import {* as 變量} from ‘模塊路徑
3.此時(shí)OO返回一個(gè)對(duì)象
4.如果希望對(duì)象中有內(nèi)容，需要XX先暴露出對(duì)象，這樣OO才能接收到并在當(dāng)前文件使用。根據(jù)暴露對(duì)象的格式，決定接手變量的格式
.暴露多個(gè)對(duì)象，通過(guò)解構(gòu)賦值接收
.暴露多個(gè)對(duì)象，通過(guò)一個(gè)變量接收
總結(jié)
以上所述是小編給大家介紹的vue-cli 組件的導(dǎo)入與使用教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用ElementPlus的Table啥都好，就是沒(méi)有可編輯表格，所以這篇文章就來(lái)和大家分享一下Vue實(shí)現(xiàn)極致舒適的可編輯表格的方法，希望對(duì)大家有所幫助2023-06-06
這篇文章主要介紹了vue單文件組件無(wú)法獲取$refs的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁(yè)面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁(yè)面空白區(qū)域也隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
基于vue實(shí)現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方
這篇文章主要為大家詳細(xì)介紹了如何基于vue實(shí)現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12
vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題
這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vue開(kāi)發(fā)中遇到了搜索框輸入防抖處理,算是防抖的使用場(chǎng)景之一吧,這篇文章主要給大家介紹了關(guān)于Vue3指令之搜索框輸入防抖功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-12-12