這篇文章主要為大家展示了“vue3.0 CLI中component組件怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue3.0 CLI中component組件怎么用”這篇文章吧。

10年積累的網(wǎng)站制作、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有麻章免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

進(jìn)入 src 文件夾，這是實(shí)際都工程文件夾，其他文件夾以及文件以后在了解。

3個(gè)文件夾  assets - 各類靜態(tài)資源文件夾 - 比如 圖片, css 文件等。  components - 組件文件夾, 組件是 vue 等 MVC 框架等核心概念，自行了解含義。 view - 視圖文件夾。

5個(gè)文件  app.vue、main.js - 主視圖、配合 main.js 成為 vue 程序的主入口。router.js - 路由程序主入口。store.js - 路由狀態(tài)管理系統(tǒng)。

registerServiceWorker.js 暫不進(jìn)行了解。

介紹完工程文件夾，進(jìn)入本文主要關(guān)注點(diǎn) - 組件。

*.js 和 *.vue文件都可以單獨(dú)成為 組件 。我不會(huì)使用單獨(dú)的 *.js 文件作為組件 ( 用 *.vue 文件作為組件方便理解和管理 )。組件可以單獨(dú)用 *.vue 寫出來(lái)，也可以分開同時(shí)用 *.vue 和 *.js 來(lái)完成一個(gè)或者多個(gè)組件。

當(dāng)前工程文件夾中存在 4 個(gè)組件：app.vue + main.js、helloworld.vue、views/home.vue、views/about.vue。

template 標(biāo)簽：4 個(gè)組件都有，這是渲染模版，也是組件的核心，細(xì)心的讀者可以發(fā)現(xiàn)這4個(gè) template 中都包含有一個(gè)頂層都 div 元素。script 標(biāo)簽：helloworld.vue 和 views/home.vue 中有，也可以用單獨(dú)的 js 文件描述，比如 main.js。style 標(biāo)簽：app.vue 和 helloworld.vue 中有，提供【組件作用域】的 css 樣式，防止團(tuán)隊(duì)協(xié)同開發(fā)導(dǎo)致的 css 樣式名沖突。

template - script - 問(wèn)答

1、為什么要使用 *.vue 和 *.js 分開的方式寫組件？

答：這個(gè)初始化的項(xiàng)目，自然沒(méi)有這個(gè)必要。在大型的項(xiàng)目中，有些組件的 模板 template 和 功能定義 script 都是相當(dāng)規(guī)模的代碼，分開管理有利于項(xiàng)目架構(gòu)的整理。

2、下面是否會(huì)介紹 style 的用法？

答：顯然不會(huì)，這方面內(nèi)容簡(jiǎn)單，讀者自行了解。

3、app.vue 與其他組件中 script 的區(qū)別？

答：這個(gè)區(qū)別很大！app.vue 中的 script 是定義各類功能的集中入口，當(dāng)前可以看到的有 路由、路由狀態(tài)管理系統(tǒng)、渲染 和 配置定義，因此 app 組件的 script 一般都是分開定義。由于 app.vue 是主程序入口，它并沒(méi)有 data、prop 等等常規(guī)組件都有的東西。關(guān)于 app.vue 和 main.js，在以后的學(xué)習(xí)中會(huì)漸漸深入。

學(xué)習(xí)改造 helloworld.vue

export default { name: 'HelloWorld', props: { msg: String } }，這是 script 代碼。export default