公司新項目開發要使用vue框架，自學了一下vue單頁開發，分享一下vue單頁項目搭建的學習效果，主要使用vue腳手架 vue-cli 和 vue全家桶（vue、vue-router、vuex、vue-resource/axios），很多地方不瞭解，大家多多指點
一、項目搭建，使用vue-cli會生成一套提前定義好的構建文件，和相應的文件。
1，npm install -g vue-cli （安裝腳手架，window+r打開cmd，進入自己想要安裝項目的文件夾）
2，vue init webpack my-project （創建自己的項目，項目命名）
3，cd my-project （進入自己的項目文件夾中）
4，npm install （下載modules，淘寶鏡像安裝也可以，安裝淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org）
5，下載開發需要的庫（下載多個可以在後面拼接上去）
npm i vue-resource vue-router vuex --save
6，npm run dev （運行項目，打開http://localhost:8080即可進入項目。
注意：在第二步時，需要執行幾個命令（選擇yes或no），其中有一個如下圖，use eslint to lint your code? 第一次選了yes，在項目中發現只能使用空格鍵來縮進，不能使用tab鍵（會報錯），再次搭建時選擇了no就可以使用其他縮進方式了。
如果選擇了yes，可以在build文件夾下的webpack.base.conf.js文件中把下面幾行註釋掉，重啓服務即可（如下圖）
二、瞭解基本的目錄結構。除了一些項目配置的文件，前端需要操作的文件基本都在src文件夾中（本人是web前端，配置的文件瞭解的很少，在努力中），打開src文件夾，目錄結構如下圖，下面會具體講解各個文件的使用。（views文件夾是我自己加的，主要放頁面，後面會詳細說明），除了src文件夾，目錄中有一個index.html的文件，這個就是我們的html頁面，所有的單頁都會顯示在這個頁面中，可以在這個頁面上引入公共的css、js等。
1，main.js
此頁面主要是引入插件和將vue實例掛載到dom上。所需要的插件都可以在這個頁面引入，css樣式也可以再次引入，寫法如下圖。
2，App.vue
這是vue單頁的根頁面，所有的單頁面都渲染到這個頁面上，寫法很簡單，基本上沒啥變化的.
3，component文件夾，這個文件夾是放公共組件的，所有的公共組件可以寫在這個文件夾裏面，比如footer.vue、header.vue等。我發現好多開源項目把所有的單頁頁面也寫在這個文件夾裏，我把所有的頁面拿了出來放在一個新的文件夾裏views，當然不拿出來也可以的，我只是個人習慣。
組件的引用很簡單，在script標籤裏import，如import
headers from 'components/header.vue'，然後在html代碼裏寫入<headers></headers>即可。
4，views文件夾。我自己新建的放單頁頁面的文件夾。
在實際開發中，有很多頁面都會用到公共的頭部和底部，每個頁面都引入組件顯得很麻煩，所有我在views文件裏新建了一個base.vue的文件，在這個頁面引入了公共的頭和底，其他頁面只需要通過路由嵌套，嵌套在base.vue頁面裏就可以了，不需要公共頭和底的就可以不嵌套。頁面的公共的部分都可以通過這種方式來做，當然具體情況具體分析。
base.vue文件寫法很簡單，如下圖：
5，router文件夾和其下的index.js， index.js是配置路由的文件，所有的路由配置都寫在這個文件裏面。
mode: vue-router 默認hash 模式 用路由的history 模式，這種模式充分利用history.pushState API 來完成 URL 跳轉而無須重新加載頁面。
path: path是路由配置好的路徑，頁面跳轉用的，如<router-link to="/login">登錄</router-link>，頁面會將<router-link>標籤轉義成a標籤，點擊就可以跳轉到路由指定的login頁面。require裏就是頁面的原始路徑，也就是路由所指向的頁面。頁面跳轉還有一種方法，就是this.$router.push(login)，類似於window.location.href=” ”，
前面提到要用到路由繼承，新建了一個base.vue的文件，路由繼承寫法如下，children裏面的頁面會嵌套在base.vue這個頁面裏，就是渲染在base.vue這個頁面上，base.vue裏面的公共組件就是公用的。類似所有的頁面都會渲染到App.vue這個頁面裏。
最開始在寫路由的時候，我的寫法是報錯的，百度的發現是resolve方法的問題，在build文件夾下的webpack.base.conf.js文件中，修改了一下resolve這個方法，這是個配置路徑的方法（我不是很明白這個），如下
項目搭建完了，好多問題都是遇到了查詢資料才解決的，還是有很多不懂的地方，特別是一些配置的問題，路由也有其他的方法。vue初步接觸，慢慢來吧。GitHub地址：https://github.com/leileibrother/vue-