系列文章的目次在 ? 这里

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