Vue的安裝
Vue.js 不支援 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支援所有相容 ECMAScript 5 的浏覽器，一般都會推薦使用NPM進行Vue 的安裝。
vue的安裝依賴于node.js,要確定你的計算機上已安裝過node.js。可進入cmd編輯器，輸入指令 node -v進行檢視。node盡量要用新一些的版本，否則後續安裝會提示node版本過低。去node官網下個新版的node重新安裝就可以。如已成功安裝node會出現如下：
确定node安裝後，就可以開始vue的安裝了。這裡提一下淘寶鏡像，用淘寶鏡像的cnpm來代替npm的安裝，速度會快很多。淘寶鏡像推薦網址：https://npm.taobao.org/。同樣可進入cmd編輯器，輸入指令 vue -v進行檢視。
# 最新穩定版
$ npm install vue
建立一個Vue項目
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基于 webpack 模闆的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
Vue項目建立成功之後，我們通過 npm run dev 運作，便進入Vue的歡迎頁面，此時你就可以用Vue的文法，編寫自己的Vue項目了。這時我們可以設定一下，運作時自動打開浏覽器。找到config檔案夾下的index.js檔案，将autoOpenBrowser設定為true,運作時可能報錯，需要去配置一下build檔案下的檔案。
web-app實踐項目開發
介紹
基于vue2.0+localStorage開發的本地記事本，并打包成類似Android的webApp。
功能
- 支援回車添加事件
- 支援事件狀态切換
- 添加事件 -> 進入未完成清單
- 未完成 -> 已完成(勾選checkbox)
- 未完成 -> 已取消(點選取消按鈕)
- 已完成 -> 未完成(取消勾選checkbox)
- 已取消 -> 未完成(點選恢複按鈕)
- 支援篩選事件
- 支援編輯事件
- 支援删除事件
- 支援清空所有事件
- 支援本地化存儲
- 支援導出.xlsx格式的資料
功能實作
1.該項目是個單頁面的應用，各元件拼接而成，由于功能簡單，沒有使用Vue的路由。
2.資料的儲存是本地儲存，localStorage是HTML5提供的一種在用戶端存儲資料的新方法，沒有時間限制，第二天、第二周或下一年之後，資料依然可用。
- 存儲資料：localStorage.setItem(item, value)
- 擷取資料：localStorage.getItem(item)
- 移除資料：localStorage.removeItem(item)
3.父子元件間的通訊，元件執行個體的作用域是孤立的。這意味着不能并且不應該在子元件的模闆内直接引用父元件的資料。
- 父元件可以使用 props 把資料傳給子元件。
- 子元件可以使用 $emit 觸發父元件的自定義事件。
4.可以通過通過類型和關鍵詞來進行篩選，使用者選擇類型，或監聽所輸入的搜尋關鍵詞通過使用過濾器( filter )，精确查尋或模糊查詢傳回符合條件的事情。
// 項目部分代碼
query () {
if (this.selectIndex || this.selectIndex === 0) {
this.arr = this.$root.todoItem.filter((item) => item.num === this.selectIndex) // 精确查詢
} else {
this.arr = this.$root.todoItem
}
if (this.screen_title) this.arr = this.$root.todoItem.filter((item) => item.value.indexOf(this.screen_title) > -1) // 模糊查詢
}
5.将資料以.xlsx格式導出，此功能需要安裝三個依賴，項目中建立一個檔案夾：（vendor—名字任取）裡面放置兩個檔案Blob.js和 Export2Excel.js。Blob.js将我們要導出的資料變成二進制，而export2Excel就是可以設定導出樣式以及提供導出的方法。
npm install file-saver
npm install xlsx
npm install script-loader
各元件詳解
- {eventAdd.vue} 這是一個添加事件的元件，将事件對象obj儲存到Vue全局變量todoItem中，首先我們需要定義一個Vue全局的對象存放所添加的事件的資料，在main.js創造Vue執行個體時，定義一個todoItem變量。然後在eventAdd元件中定義一個對象，并設定其對象的屬性，屬性值，代碼後面已做了注釋。
- {eventsList.vue} 對事件進行處理的元件，首先通過this.$root.todoItem擷取Vue全局變量裡所存放的事件，讓後通過v-for對資料進行處理渲染到頁面上，點選不同的事件時，改變事件對象num屬性的屬性值，改變num屬性值以後，一定要再一次把todoItem變量儲存到本地（不同屬性的屬性值代碼上已經做了注釋），通過v-if判斷num的屬性值将事件渲染到不同的位置。例如點選取消事件，将事件的num屬性值變為2.
3.{sidebar.vue} 是測邊欄，提供切換主題，下載下傳資料，編輯資料，清空資料。點選下載下傳資料，浏覽器将自動把存放在todoItem變量裡的事件對象通自己設定的樣式已.xlsx格式導出，其具體實作看代碼。點選編輯資料，清空資料時，通過this.$emit（）将資訊傳給父元件，而元件再通過prop調用其它的元件。
父元件（app.vue）其結構
- {eventsTable.vue}該元件是對事情事件進行編輯，提供搜尋，編輯，删除事件功能，注意：需定義一個中間變量，不能直接去使用this.$root.todoItem進行清單渲染，否則查詢的時候會将原有的事件資料進行改動。查詢有着幾種方式，如下：
H5案例開發 - 還有其它彈框，頭部，尾部元件，都是通過父子元件間的通訊，而且可以重複利用，大概也算元件化開發一種優勢，可以少寫很多重複的代碼，代碼有着詳細的注釋。
打包
項目開發完成後，需要進行打包才能部署到伺服器上的，打包之前我們需要改一下config檔案夾index.js檔案的配置，需多加一個點。打包完成後可以在dist檔案夾下找到打包後的檔案。
// 執行命定
npm run build
打包成安卓webApp
當打包完成後，是通過cordova，android studio來進行打包成安卓webApp，其實打包流程不難，就幾步，隻是配置安卓壞境有點麻煩，可以試着了解一下，将自己的項目打包成安卓webApp。
總結
本人也是小白一枚，一直踩坑中，多多指導，互相交流學習。這個案列适合新手去了解vue的幾個重要的特性，感覺用不到路由，其實Vue路由的功能還是非常的強大的。
安卓webApp下載下傳 https://pan.baidu.com/s/1i7clnvv
github位址 https://github.com/flym1013/notes-