脚本宝典收集整理的这篇文章主要介绍了[使用 Weex 和 Vue 开发原生应用] 7 完整项目目录详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
weex-hackernews 是一个使用 Weex + Vue 开发的原生应用项目，可以实现同一份代码在三端中运行。不仅用到了 Weex 和 Vue.js 的各种特性，也用到了 Vuex 和 vue-router ，在 Web 、 AndROId 、 iOS 上都能正常工作，作为一个范例供大家参考。
版本：v1.0
执行 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 平台的入口是 index.html，在安装好依赖之后，可以通过 npm run serve 启动监听 1337 端口，访问 http://127.0.0.1:1337/index.html 即可打开 Web 应用。
Android 项目在 android 目录中，包含了一个完整的 Android Studio 项目，可以直接用 Android Studio 打开。在打开前要确保开发环境配置正常。
iOS 项目在 ios 目录中，是一个标准的 xcode 项目，使用 Xcode 打开即可。
项目使用了 CocoaPods 管理依赖，在启动项目之前应该配置好 CocoaPods 命令，然后进入 ios 目录执行以下脚本安装依赖：
pod installandroid 和 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以上是脚本宝典为你收集整理的[使用 Weex 和 Vue 开发原生应用] 7 完整项目目录详解全部内容，希望文章能够帮你解决[使用 Weex 和 Vue 开发原生应用] 7 完整项目目录详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。