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進行列表渲染，否則查詢的時候會將原有的事件數據進行改動。查詢有着幾種方式，如下：
-
還有其它彈框，頭部，尾部組件，都是通過父子組件間的通訊，而且可以重複利用，大概也算組件化開發一種優勢，可以少寫很多重複的代碼，代碼有着詳細的註釋。
打包
項目開發完成後，需要進行打包才能部署到服務器上的，打包之前我們需要改一下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-
