[使用 Weex 和 Vue 开发原生应用] 1 如何配置开发环境

系列文章的目录在 ? 这里

开始以前

每一个项目开始以前，都会先讲怎么搭环境，Weex 和 Vue 都讲了。其实一个框架推出以后，“怎么配置开发环境”这类文章会比较多，每一个人写的都不同，最好的方式是去看官方文档。我这里若是详细写的话，确定和官方文档 80% 内容都同样。

• 《Weex 快速上手》

• 《Vue.js 介绍》

因此我就不讲怎么搭环境了！文章标题是骗人的！ ?

由于有现成的项目能够参考（weex-hackernews），能够直接“授之以鱼”。不过，我会根据不一样的需求，帮你找到“授之以渔”的那些文章。

其实这些技巧与 Weex 和 Vue 都没多大关系的，在 突飞猛进 的前端环境里，学习怎么配“最早进”的开发环境是个绕不过的坎。我这里只讲与 Weex 和 Vue 有关的。

学习 Weex + Vue

如今有机会在生产环境中使用 Weex + Vue 的应该寥寥无几，你们应该都是抱着一份好奇的心态想看看 Weex + Vue 能折腾出什么花样。

若是你只是想学习 Weex 和 Vue，那就不比大费周章的搭建什么 Android 、iOS 环境，直接在 dotwe.org 上写例子，使用 Weex Playground App 扫描二维码就能够查看页面了。Weex 从 0.9.5 才开始支持 Vue，使用以前请确保 SDK 版本正确。

用 Weex Playground App 扫描这个连接中的二维码能够获取 WeexSDK 的版本。（建议提 issue 以前都能提供环境信息）

除此以外，我还有一个仓库，weex-vue-examples，里边包含了各类单页的小例子，几乎涵盖了全部 Weex 组件、模块，也用到了不少 Vue 2.x 的特性。能够也能够直接将代码复制到 dotwe.org 上运行。

进一步学习 Weex + Vue

若是你不知足于使用在线网站写代码，想在本地写一些更复杂的例子（有没有发现 dotwe 上无法写多文件的例子），很好，给你推荐两个工具：weex-toolkit 和 weex-pack。

为何是两个工具？由于解决的问题不同，目前这两个工具也正在考虑合并，把 weex-pack 合进 weex-toolkit，只保留 weex 命令。

一样，我也不写具体的使用方法了，各自的项目文档上都有，我讲一下这两个工具的特色和差异。

若是你们有详细的使用经验，欢迎贡献出来，精力有限，欢迎好心人帮我填坑。。。?

使用 weex-toolkit

安装完 weex-toolkit 以后，它生成了 weex 命令，是个工具集，用法是 weex <command> [options]。它主要有三个功能：

• 初始化项目。

• 编译 .we 和 .vue 文件。

• 调试代码。

对我来讲，用的最多的就是 调试代码。weex debug 能够会启动一个 server 而且弹开一个调试页面，上边有个二维码；用 Weex Playground App 扫描这个二维码就能够用 chrome 开发者工具调试真机了。

对于项目的初始化，你们能够用各自最喜欢的工具来搭，官方标配是 Webpack + weex-loader ，其余的，像启动本地服务、eslint、postcss、自动化测试这些东西均可以自行配置的，和其余标准的前端项目同样。

至于编译，仍是建议使用 dotwe.org 或者本地配个工程编译源码，由于命令行工具更新慢，又比较难定制。

使用 weex-pack

weex-pack 最初存在的目的就是为了方便你们打包 Android 和 iOS 应用，是解决原生开发的一些问题的。它也能初始化项目，不过生成的项目里除了 Web 工程之外，还有 Android 和 iOS 。

虽然可以直接生成好 Android 和 iOS 工程，可是若是你机器上什么环境也没配，也是运行不起来的。

运行 Android 至少得装 java 和 Andorid SDK，建议使用 Android Studio，生成的安卓工程是基于 Android Studio 的；运行 iOS 得用 Mac，依赖管理使用 CocoaPods，再稍微配置一下 Xcode 便可。这方面的教程网上比较多了，我也不专业，我就不误人子弟了。

集成 WeexSDK

其实你不是非得集成 WeexSDK 才能用真机看 Weex + Vue 的渲染效果的，有好几种方法：

• 下载 Weex Playground App，扫描 dotwe.org 中的例子。

• 使用 weexpack init [project-name] 初始化三端工程。

• 克隆 weex-hackernews，直接使用其中的 Andorid 和 iOS 工程。

能走到这一步的人都比较有耐心，相信你对 Weex 也有了比较全面的了解。官方也有文档教你怎么集成 WeexSDK ：

• 《集成 Weex 到已有应用》 （包含了 Android 和 iOS）

若是你想扩展 Weex 的组件和模块，也有相关文档可供参考：

• 《Android APIs》

• 《Android 扩展》

• 《iOS APIs》

• 《iOS 扩展》

在 weex-hackernews 这个项目里，我最初也是没有使用 weex-pack 这个工具，是一步一步用 Android Studio 和 Xcode 建立的项目，而且添加的原生初始化代码。（由于当时工具都还不支持 Vue，连 WeexSDK 都得手动基于仓库源码集成?）

参考 weex-hackernews 的两个 PR 查看初始化步骤和代码：Andorid 、 iOS。