[使用 Weex 和 Vue 開發原生應用] 7 完整專案目錄詳解

Hanks10100發表於2017-04-18
Vue

系列文章的目錄在 ? 這裡

weex-hackernews 是一個使用 Weex + Vue 開發的原生應用專案，可以實現同一份程式碼在三端中執行。不僅用到了 Weex 和 Vue.js 的各種特性，也用到了 Vuex 和 vue-router ，在 Web 、 Android 、 iOS 上都能正常工作，作為一個範例供大家參考。

開發環境

程式碼倉庫中包含了三端的專案，原始碼都在 src 目錄中。

執行 npm run build 可以將原始碼打包成 js bundle 供三端使用。程式碼是使用 Webpack 2 打包的，配置檔案是 webpack.config.js，其中入口檔案是 src/entry.js ，輸出的檔案有兩個：一個是針對 web 平臺生成的 dist/index.web.js，可以直接通過 <script> 標籤引入；另外一個是針對 Android 和 iOS 平臺生成的 js bundle 檔案，生成在 dist/index.weex.js，可以通過執行 npm run copy 將打包生成後的檔案拷貝到原生專案中。

專案還使用了 babel 用於轉換 ES6 的程式碼。

Web 專案

Web 平臺的入口是 index.html，在安裝好依賴之後，可以通過 npm run serve 啟動監聽 1337 埠，訪問 http://127.0.0.1:1337/index.html 即可開啟 Web 應用。

Android 專案

Android 專案在 android 目錄中，包含了一個完整的 Android Studio 專案，可以直接用 Android Studio 開啟。在開啟前要確保開發環境配置正常。

iOS 專案

iOS 專案在 ios 目錄中，是一個標準的 Xcode 專案，使用 Xcode 開啟即可。

專案使用了 CocoaPods 管理依賴，在啟動專案之前應該配置好 CocoaPods 命令，然後進入 ios 目錄執行以下指令碼安裝依賴：

pod install

專案目錄

android 和 ios 目錄中存放著各自平臺的原生專案，頁面原始碼都在 src 目錄中。目錄說明如下：

/src
  ├── components/    # 元件
  ├── filters/       # 通用過濾器
  ├── mixins/        # 全域性混合
  ├── store/         # 全域性的 Store
  ├── views/         # 檢視（頁面）
  │
  ├── App.vue        # 根元件
  ├── entry.js       # 入口檔案
  └── router.js      # 路由配置

更詳細的說明如下：

/src
  ├── components/
  │   ├── app-header.vue       # 頁面頭部導航條
  │   ├── comment.vue          # 評論框
  │   ├── external-link.vue    # 外部連結
  │   └── story.vue            # 單條新聞項
  ├── filters/
  │   └── index.js             # 通用過濾器
  ├── mixins/
  │   └── index.js             # 全域性混合
  ├── store/
  │   ├── actions.js           # 運算元據的 Actions
  │   ├── fetch.js             # 封裝的網路請求介面
  │   ├── index.js             # Store 例項
  │   └── mutations.js         # 資料的 Mutations
  ├── views/
  │   ├── ArticleView.vue      # 文章頁
  │   ├── CommentView.vue      # 評論頁
  │   ├── StoriesView.vue      # 新聞列表頁
  │   └── UserView.vue         # 使用者資訊頁
  │
  ├── App.vue
  ├── entry.js
  └── router.js

相關文章