之前想寫一篇如何安裝腳手架的部落格，但是自己對於webpack又不瞭解，所以就作罷，假定這是在已經有vue基礎的

首先，對於元件。我們的理解是將頁面的一部分分割，然後將一部分就稱之為元件，就好像我們最常用的按鈕，他也可以算是一個元件，這樣，整個介面被規劃成為一個個小的元件，那麼我們就實現了元件化

圖例：

可能你會覺得，既然是一個完整的頁面，為什麼要分割成為一個個小小的元件？

比如一個介面中有一個搜尋框，我們可能會在多次用到，那麼我們把他變化了元件，那麼我們不久是可以多次引用，不用去再次編寫了。

接下來該給例子了

在使用了指令碼架之後，我們的結構已經很分明瞭，由於使用的是介面元件化，那麼我們就直接上相關的程式碼

先說說
流程，首先，我們的index。html中定義了關於了id為app的一個div，那麼我們就需要用到app。vue

其次，webpack也定義了程式的入口為main。js，那麼我們的main。js也是要用到的。接著加上我們自己定義的元件，所以我們就愉快的決定了要修改的檔案有三個，

第一步，我們需要定義我們的vue檔案來封裝，承載我們的元件，我們先看看檔案的目錄結構吧：

開始吧，首先先寫出我們的元件，就取其中一個hello。vue來

這裡請不要嫌棄我囉嗦，我講講關於vue檔案的結構，我們的佈局程式碼通常都是寫在《template》標籤中的，在<script>標籤中，我們的做法是用來書寫我們的指令碼語言

（請注意，我們的msg是需要放在return中的），style就不用說了

接下來在我們的app。vue中去引用我們的元件

。。。原諒我不會畫圖，看得出來，我們的app。vue也是在由那三個標籤構成，

步入正題，我們在第二個黑色尖頭的地方，我們引入了這兩個vue檔案，然後我們在第三個箭頭的時候，將其定義為components

然後我們就可以使用他了，是不是很厲害，那麼我們執行一下吧

執行成功，而且我們下個介面要使用的時候也是這樣就可以了，很是簡單，方便。