weex 开发环境搭建

搭建开发环境等等可以参考 weex 文档 的工具类目

weex toolkit ： https://weex.apache.org/cn/guide/tools/toolkit.html

1：首先weex依赖于node打包

安装node  https://nodejs.org/en/download/ 下载对应包 ，windows 下一步下一步的安装即可，

检测node 是否安装完成 终端输入命令 node  出现该提示框说明node 安装完成

2：安装  weex-toolkit 在终端执行命令  npm install -g weex-toolkit  中国用户如果npm遭遇网络问题，可以使用淘宝的 cnpm 镜像：

3：接下来就可以创建一个 weex 项目了 

$ weex init easipasstestweex

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

目录结构如图：

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

在 package.json 中，已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

我们先通过 npm install 安装项目依赖，这个耗时比较长。

之后运行 npm run dev 和 npm run serve 开启 watch 模式和静态服务器。

其中 npm run dev 命令是编译项目为js 的一个命令，执行了这个命令后weex项目如果有修改的话 ，weex会在第一时间进行实时编译

npm run serve 这个命令的话是运行本地服务，让编译好的程序能够降级以html的形式访问

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 Weex h5 页面

4：搭建 native环境  以上 1-3 操作完成后可以创建成功一个 weex 项目，但是这个项目仅仅是 可以vue 开发预览的一个效果，我们使用weex并不是仅仅希望开发一个网页，所以我们需要搭建android 和ios 开发环境

4-1：android 开发环境搭建 ，现在google慢慢已经舍弃了 eclipse使用 android studio 作为android app开发工具了，百度 android studio 即可完成android studio的下载

因为这里主要讲说weex，所以android 开发环境安装不再大篇幅介绍，大致就跳过了，安装过程可参考如下连接 http://jingyan.baidu.com/article/ad310e80a9328a1849f49e30.html 

4-2：ios开发环境搭建，ios开发环境需要你有一台 mac电脑 或者一个 mac的虚拟机，然后到appstore 下载 xcode安装即可，具体安装过程可参考链接 ：http://jingyan.baidu.com/article/d5c4b52be56362da560dc5e9.html

这里如何将项目打包放到后续介绍