如何去開發一個webApp

flym_發表於2018-02-01

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…

這裡寫圖片描述

相關文章