weex 构建项目

前言

Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。

使用 weex-toolkit

weex-toolkit 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。

weex-toolkit 和 weexpack 比较：

weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的，也就是说这样的项目只包括单个页面开发需要的东西，比如前端页面源文件、webpack 配置、npm 脚本等。项目产生的输出就是一个 JS Bundle 文件，可以自由的进行部署。weex-pack 是初始化一个完整的 App 工程，包括 Android 和 iOS 的整个 App 起步，前端页面只是其中的一部分。这样的项目最终产出是一个 Android App 和一个 iOS App。目前了解官网使用weex-toolkit，我也就使用weex-toolkit，目前weex-toolkit集成对weexpack的命令调用支持，所以，我们使用weex-toolkit命令来实现weexpack具备的功能。

安装

使用 npm 安装:

$ npm install -g weex-toolkit

安装成功后，你输入 weex 应该可以看到下面的提示效果：

初始化 weex 项目

$ weex init awesome-project

执行完命令后，在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

然后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

安装项目依赖

npm install 

实时预览

weex-toolkit 支持预览你当前开发的weex页面(.we或者.vue)，你只需要指定预览的文件路径即可：

$ weex src/App.vue

浏览器会自动弹出页面，这个时候你可以看到你所编辑的 Weex页面的具体效果和页面布局。
下载官网提供的Playground， 扫描右边的二维码，就能够看到 Weex 在 Android/IOS 设备上的效果了。

如果你需要预览整个项目目录，你可以输入这样的命令:

$ weex src --entry src/App.vue

编译前端代码

$ npm run dev

打包Android端

使用weex-toolkit

$ weex platform add  android

打包IOS端

使用weex-toolkit

$ weex platform add  ios