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

系列文章的目錄在 ? 這裏

weex-hackernews 是一個使用 Weex + Vue 開發的原生應用項目，能夠實現同一份代碼在三端中運行。不只用到了 Weex 和 Vue.js 的各類特性，也用到了 Vuex 和 vue-router ，在 Web 、 Android 、 iOS 上都能正常工做，做爲一個範例供你們參考。

• 項目地址：weexteam/weex-hackernews

• 版本：v1.0

開發環境

代碼倉庫中包含了三端的項目，源碼都在 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