如何去開發一個webApp

flym_發表於2018-02-01
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的版本

確定node安裝後，就可以開始vue的安裝了。這裡提一下淘寶映象，用淘寶映象的cnpm來代替npm的安裝，速度會快很多。淘寶映象推薦網址：npm.taobao.org/。同樣可進入cmd編輯… vue -v進行檢視。

# 最新穩定版
$ npm install vue
複製程式碼

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元件中定義一個物件，並設定其物件的屬性，屬性值，程式碼後面已做了註釋。

Vue全域性變數todoItem

這裡寫圖片描述

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

這裡寫圖片描述

  1. {eventsTable.vue}該元件是對事情事件進行編輯，提供搜尋，編輯，刪除事件功能，注意：需定義一箇中間變數，不能直接去使用this.$root.todoItem進行列表渲染，否則查詢的時候會將原有的事件資料進行改動。查詢有著幾種方式，如下：

    這裡寫圖片描述

  2. 還有其它彈框，頭部，尾部元件，都是通過父子元件間的通訊，而且可以重複利用，大概也算元件化開發一種優勢，可以少寫很多重複的程式碼，程式碼有著詳細的註釋。

打包

專案開發完成後，需要進行打包才能部署到伺服器上的，打包之前我們需要改一下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…

這裡寫圖片描述

相關文章