[使用 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