看完了配置，接下來通過一個實例，更清晰地了解這些文件之間的聯系，順帶練習練習vue相關知識。
1、安裝
打開命令行控制器，系統自帶cmd或者git bash等都可以，按照順序輸入如下指令，耐心等待每一條指令執行完成即可。
npm install -g vue-cli //-g指的是將包安裝到全局環境中global /** *template-name是模板名稱，這條指令的含義是生成項目模板。官方提供了五種模板：webpack/webpack-*simple/simple/browserify/browserofy-simple 使用vue list可查看所有*官方模板；也可使用自定義模板或者本地模板 *自定義模板：fork官方模板按照自己的需求去修改，通過vue-cli命令生成基於自己模板的項目結構。vue init username/repo my-project *本地模板：下載下來自定義的模板到本地，直接從本地加載。vue init ~/fs/path/to-cutom-template my-project * */ vue init <template-name> <project-name> //這塊安裝過程中有一些選項，可按照自己的喜好選擇yes或者no
cd project-name //切換到項目目錄下 npm install //安裝node依賴 npm run dev //運行package.json中，名稱叫dev的腳本
在瀏覽器中輸入：localhost:8080/ 如果出現如下vue介紹頁面，則證明安裝成功。（ps:很高興認識你這句是在安裝好的項目中hello.vue修改的msg）
npm或者github上面說的很清楚，在此放上鏈接： https://www.npmjs.com/package/vue-cli
2、搭建好的腳手架目錄結構：
關於目錄結構的組成及含義，大家可以去看我的前幾篇博客，每個文件都有詳細解釋。（PS:src下的文件夾不必跟我一樣，大家可大膽地按照自己的需求創建）
3、demo UI 構建。
下圖是這個demo編寫初期的UI設想。
一個登錄頁：功能有姓名、密碼、登錄按鈕；一個主頁面：底部四個bar切換內容區。在此重點看看主頁面。
分析主頁面哪些可以提取出來作為組件使用。標題欄得做成一個組件，因為每個頁面都有類似的標題欄；底部切換欄得做成一個組件；中間內容區做成一個組件（這個demo里，內容區只展示一句話，所以可以抽取為一個組件）。
所以這里一共創建了三個組件，vue單文件組件的基本結構為：<template>html 代碼在此書寫</template> <script> js代碼在次書寫</script> <style>樣式代碼在此書寫</style>
標題欄：標題欄需要定制的內容是標題名，即文件中的titile,在這里使用props，將父組件中的數據傳遞到該子組件。登錄按鈕做了一個路由指向<router-link>。
內容區：只有一個內容{{mcontent}}，這里也是通過props來將父組件的數據傳遞到該子組件。
底部欄：很簡單的內容，就是四個切換Bar。注意這里引用了一個標簽<router-link>，這是vue中的路由標簽，通過to指向一個路由（這個路由是在index.js文件中定義的，一會會看到那個文件）。
頁面總共寫了兩個，登錄和主頁面，在此就看一下主頁面吧，具體代碼如下：
可以看到在<script>中注冊了三個組件 mcontent 、headerBar、 footBar；data（）{}中是傳遞給子組件的數據。
路由配置：路由中定義的path就是<router-link to="path"> </router-link>中的值。
這是個很簡單的例子，其余文件不需要配置了，現在就可以執行npm run dev 來查看效果。效果圖貼在下面。
完整代碼地址在這里： https://gitee.com/susan007/vue-demo-20180122.git
至此，一個vue小demo完成了，雖然功能基本木有。。。后面會繼續完善這個demo，添加更多的功能，引入更多的vue用法。
歡迎大家提出寶貴意見，共同進步，蟹蟹~~~