如何去開發一個webApp

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的安裝，速度會快不少。淘寶鏡像推薦網址：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
複製代碼

各組件詳解

1. {eventAdd.vue} 這是一個添加事件的組件，將事件對象obj保存到Vue全局變量todoItem中，首先咱們須要定義一個Vue全局的對象存放所添加的事件的數據，在main.js創造Vue實例時，定義一個todoItem變量。而後在eventAdd組件中定義一個對象，並設置其對象的屬性，屬性值，代碼後面已作了註釋。

2. {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）其結構

4. {eventsTable.vue}該組件是對事情事件進行編輯，提供搜索，編輯，刪除事件功能，注意：需定義一箇中間變量，不能直接去使用this.$root.todoItem進行列表渲染，不然查詢的時候會將原有的事件數據進行改動。查詢有着幾種方式，以下：

   

5. 還有其它彈框，頭部，尾部組件，都是經過父子組件間的通信，並且能夠重複利用，大概也算組件化開發一種優點，能夠少寫不少重複的代碼，代碼有着詳細的註釋。

打包

項目開發完成後，須要進行打包才能部署到服務器上的，打包以前咱們須要改一下config文件夾index.js文件的配置，需多加一個點。打包完成後能夠在dist文件夾下找到打包後的文件。

// 執行命定
npm run build
複製代碼

打包成安卓webApp

當打包完成後，是經過cordova，android studio來進行打包成安卓webApp，其實打包流程不難，就幾步，只是配置安卓壞境有點麻煩，能夠試着瞭解一下，將本身的項目打包成安卓webApp。

總結

本人也是小白一枚，一直踩坑中，多多指導，相互交流學習。這個案列適合新手去了解vue的幾個重要的特性，感受用不到路由，其實Vue路由的功能仍是很是的強大的。

安卓webApp下載： pan.baidu.com/s/1i7clnvv

github地址： github.com/flym1013/no…