摘要：官方默認項目是存放了一個為的打開文件夾有一個，還有一個名為組件的文件夾，里面放了一個文件。部分我們會發現這幾排字就是顯示在頁面的幾排文字部分這其中的這個文件引入了，還有上述的。結合查詢其他說法，就是說它會把是的元素以形式替換。

我很早就想來學習學習vue.js啦，終于有了那么一些空閑的時間可以拿來學習，于是從前天開始我就每天抽一個多小時來體驗vue.js。
當然啦，因為是小白入門，這其中可能會有“錯誤”或者不恰當的說法，還請各位大神能多指正我(●"?"●)。

Vue.js官網：https://cn.vuejs.org/v2/guide...
固然最好的資料就是官網了，所以一開始我在官網上看了一些基本的用法，然后就跟著官方的安裝教程安裝（https://cn.vuejs.org/v2/guide...），過程比較順利，也相對容易。
安裝好vue和vue-cli之后，就可以初始化項目了，運行

vue init webpack my-project

之后，出現了一個名為my-project的項目文件夾。進去之后就會發現整個項目的結構：

當然node_modules這個文件夾是后面才出現的，也就是我們還要運行

npm install

這個命令會根據pakage.json里的依賴內容去安裝相關的依賴包，但是我就是在這里遇到了一個小麻煩，就是它很久都沒有反應，后來查詢才知道是因為命令會去國外的網站去下載的，速度太慢了，所以我們最好用國內的鏡像去下載。直接下載淘寶的cnmp命令行工具（https://npm.taobao.org/）或者借用鏡像地址下載就可以解決問題。

npm install --registry=https://registry.npm.taobao.org

最后，只要輸入

npm run dev

就可以運行項目了，會在git上看到如下圖的提示，瀏覽器也會自動打開頁面：

看到官網的默認頁面就是運行成功了。

我們看看這個文檔結構的文件，要找到入手改代碼的地方，就要知道這些文件是做什么用的。

index.html：官方默認項目是存放了一個ID為app的DIV

打開src文件夾：

有一個main.js、App.vue，還有一個名為組件的文件夾，里面放了一個HelloVue.vue文件。我們都打開看看。
HelloVue.vue部分：

我們會發現這幾排字就是顯示在頁面的幾排文字~
App.vue部分：

這其中的", components: { App } })

這個文件引入了App.vue，還有上述的router.js。并在下面用到了App的組件。
所以可以得出一個簡單的結論：以main.js為中心，main.js引進了App.vue，App.vue借助使用到了HelloWorld。
在main.js中這個組件對準了id是app的元素，使用APP組件去替換。
其中有一句template: ""，官方對template（https://cn.vuejs.org/v2/api/#...）的解釋是：

一個字符串模板作為 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。
結合查詢其他說法，就是說它會把id是app的元素以形式替換。

router-view替換
在App.vue中，不用寫出一樣的效果