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