[TOC] >[success] # 組件種類 ~~~ 1.這個問題的來源是我第一使用vue-cli 搭建項目的時候產生的，某天公司一個 開發人員問我，我的項目結構規劃的時候，我提到了視圖組件，公司同事立刻 反問我視圖組件和組件有什么區別 ，當時我懵了一段時間。根據cli為我們規 劃的項目目錄，我們也可以發現官方很明確的將組價分別放到了'views' 文件 件中和'components' 文件中，但兩者都是組件區別在哪里？ 2.這篇文章是根據'Aresn' 大神在掘金發布的文章，我個人理解。重新再次整 理的內容，如果你的資金允許特別推薦購買這個大神的小冊，準確的說我的 vue除了官方文檔，和一些視頻教程外，讓我進步最快的就是'iview' 幾位作者將自己vue文章分享出來，讓我這個剛剛接觸vue的人可以進步飛快， 在這里還要強推iview另一個作者'lison' 大神 ~~~ <a href='https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bc844166fb9a05cf52af65f'>文章來自AresnTalkingData 前端架構師，iView 作者 發布在掘金網小冊中內容啟發整理</a> >[danger] ##### 組件種類 ~~~ 1.簡單的說vue項目中的組件分為三種'視圖組件'，'基礎組件','業務組件' 2.什么是視圖組件：由 vue-router 產生的每個頁面主要承載當前頁面的 HTML 結構，會包含數據獲取、數據整理、數據可視化等常規業務。整個文 件相對較大，但一般不會有 props 選項和 自定義事件，因為它作為路由的渲 染，不會被復用，因此也不會對外提供接口。這類組件主要是根據還原設計 稿，完成需求 2.基礎組件:不包含業務，獨立、如日期選擇器、模態框等。這類組件作為項 目的基礎控件，會被大量使用，因此組件的 API 進行過高強度的抽象，可以 通過不同配置實現不同的功能,開發難度要高于第一類組件，因為它的側重點 是 API 的設計、兼容性、性能、以及復雜的功能。這類組件對 JavaScript 的編程能力有一定要求 3.業務組件:在業務中被多個頁面復用的，它與獨立組件的區別是，業務組件 只在當前項目中會用到，不具有通用性，而且會包含一些業務，比如數據請 求；而獨立組件不含業務，在任何項目中都可以使用，功能單一，比如一個 具有數據校驗功能的輸入框。也可以對現階段的一些流行js庫進行二次封裝 成vue組件 ~~~ >[danger] ##### 組件的組成 [文章參考即刻時間一點資訊開發唐金州](https://time.geekbang.org/course/detail/163-86426) ~~~ 1.隨著組件的深入，大體可以發現組件是屬性、事件、插槽的組成體，屬性其實 vue詳細劃分了三個部分，分別是自定義屬性'props'、'原生屬性attrs'、'特殊屬性class/style' 2.具體案例可以看下一章節 ~~~