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