vue 模塊化

轉載自:http://www.cnblogs.com/kongsanpang/p/6222703.html#commentform

最近在網上看到不少大神都有寫博客的習慣，堅持寫博客不但能夠爲本身的平時的學習作好記錄積累 無心之中也學還能幫助到一些其餘的朋友因此今天我也註冊一個帳號記錄一下學習的點滴！固然本人能力實在有限寫出的文章可能和大神們不能比擬 若是有什麼不專業甚至是錯誤的地方還請你們指正！好了說了這麼多那麼下面進入正題^_^

在網上常常看到有朋友在問本身能不能寫vue組件 若是能夠怎麼應用到本身的項目之中呢！我以爲吧這個事兒就和用煮大米飯是一個道理的

1. 首先做大米飯咱們得有米吧 要不 巧婦難爲無米之炊啊  所以先買好咱們本身的大米也就是建立組件文件，這裏我假設要建立一個本身loading效果組件 那麼咱們就先建立 loading.vue 裏面的代碼根據vue template相關規則寫就能夠 這裏就不在贅述了 我只寫一個最最簡單的例子 

2.ok了 米就這麼愉快的買好了 那麼有了米咱們如今只須要把他放在鍋裏！那麼這個鍋是誰呢！好吧咱們本身來背這個鍋，咱們建立一個相關的.js文件 一般組件都是一個功能本身一個文件夾那麼每一個組件都應該有本身獨立的調用文件（一盆大米一個鍋）那麼爲了統一咱們能夠都叫作index.js固然了這個名字你能夠隨便起 只有之後你在後續調用時候更換相關名字便可！重點來了 這個鍋是怎麼造的呢！話很少說直接上圖

那麼上面三個這麼違和的框是幹什麼的麼：紅色框框：我靠這還用問嗎  你調用那個文件你得告訴人間啊 這裏固然要調用剛纔咱們本身建立的loading.vue文件。  黃色框框：我靠這個黃色的框框能夠說是本次本文章中重點中的重點 爲何這麼說呢 咱們要使用本身的組件就要導出這個組件 而這個黃色框框中的代碼就是導出本身組件的相應配置  其中那個很是猥瑣的浪線則是本例子的」命根子「 這個命名就是你在其餘文件中調用這個組件（這裏是loading組件）的名字 在這個例子中咱們在調用組件時候就能夠寫成<Loading></Loading>。白色框框：這個沒什麼好說的 至關於導出這個組件 在main中好接受！

3.原材料大米也有了 飯鍋也有了 如今是萬事俱備只欠東風 那咱們第三部就是一個字」煮「 兩字：」開火「 這裏就是咱們要把咱們這個本身建立的組件應用到咱們的頁面之中 詳情請看下圖

黃色框框部分就是在主文件main.js中 引入剛纔定義的組件 和 應用 這個組件了！

 

最後的最後你能夠在任何想用這個組件的地方插入<Loading></Loading>了 組件相應的樣式和js代碼能夠直接寫在第一步中的文件之中！就這樣一個本身建立的組件就這麼愉快的應用啦！

（備註：本實例家裏在用vue init webpack-simple xxx的基礎之上，第一次寫文章不少不周全之處 還請各位客官諒解 ）