共计 3323 个字符，预计需要花费 9 分钟才能阅读完成。
“工欲善其事，必先利其器”，学习 Weex 之前需要先搭建好本地的开发环境，如果只是想简单的体验下 Weex 的魅力，可以使用 Weex 提供的 dotWe 在线运行环境，地址为“http://dotwe.org/vue”。
安装依赖
Weex 官方提供 weex-toolkit 的脚手架工具来辅助开发和调试。不过需要先安装 Node.js 和 Weex Cli 相关的环境。
安装 Node.js
安装 Node.js 有多种方式，最简单的方式是直接从 Node.js 官网下载可执行安装程序直接安装即可。如果是 Mac 环境，还可以使用 Homebrew 进行安装，安装命令如下：
brew install node
安装完成之后，可以使用下面的命令来检测是否安装成功。
$ node -v
v6.11.3
$ npm -v
3.10.10
通常，安装 Node.js 软件包后，npm 包管理工具也会随之安装。因此，接下来可以直接使用 npm 来安装 weex-toolkit 工具。
npm install -g weex-toolkit
如果要升级 weex-toolkit，则可以使用下面的命令：
weex update weex-devtool@latest //@后标注版本后，latest 表示最新版本
如果是国内开发者，还可以使用淘宝的 npm 镜像来安装 weex-toolkit，涉及到的安装命令如下：
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit
安装结束后，可以直接使用 weex 命令来验证是否安装成功，如果安装成功会显示 weex 命令行工具各参数，如下图所示。
安装 weexpack
weexpack 是 weex 新一代的工程开发套件，是基于 weex 快速搭建应用原型的利器。使用 weexpack 可以快速的帮助开发者通过命令行创建 weex 工程和插件工程，添加相应平台的 weex 应用模版，weexpack 还支持快速打包 weex 应用并安装到手机运行，并创建 weex 插件模版并发布插件到 weex 应用市场。安装 weexpack 的命令如下：
npm install -g weexpack
安装 Weektools
weex-toolkit 是官方提供的一个脚手架命令行工具，可以使用它进行 Weex 项目的创建、调试以及打包等操作。weex-toolkit 从 1.0.1 版本之后才开始支持初始化 Vue 项目，所以使用时请注意 weex-toolki 的版本。weex-toolkit 的安装命令如下：
npm install -g weex-toolkit
如果使用上面的命令安装，使用的是从 https://registry.npmjs.org 获 …，所以对于国内用户来说，最好选择从阿里的镜像去下载，安装时需要执行如下的一些命令。
npm install -g cnpm –registry=https://registry.npm.taobao.org // 淘宝镜像
npm install -g weex-toolkit
安装完成之后，可以使用 weex - v 或者 weex 命令来验证是否安装成功。
安装 Android 环境
如果需要支持 Android 平台则需要配置 Android 开发环境：安装 Java 相关环境，安装 Android Studio 及 Android SDK。在安装编译 Android 项目时需要保证 Android build-tool 的版本为 23.0.2 以上。
安装 iOS 环境
如果需要支持 iOS 平台则需要配置 iOS 开发环境：安装 Xcode、cocoaPods 及其相关环境。其中，Xcode 是 Apple 公司提供的集成开发工具，可以使用它开发 macOS 和 iOS 应用程序，而 CocoaPods 则是负责 iOS 项目管理的第三方开源库的工具，合理的使用 CocoaPods 可以提高程序的开发效率。
创建项目
接下来，使用 Weex 提供的 create 命令初始化一个 Weex 项目。
weex create weexdemo
执行完上述命令后，在工程 weexdemo 目录下就会创建一个使用 Weex 或 Vue 模板创建的项目，工程目录结构如下。
WeexProject
├── README.md // 项目便签
├── android.config.json //Android 工程配置
├── configs //weex 配置
├── ios.config.json //ios 工程配置
├── package-lock.json
├── package.json // 项目 npm 包管理
├── platforms // 平台模版目录
│ ├── ios //ios 原生平台目录
│ └── android //android 原生平台目录
├── plugins // 插件下载目录
│ └── README.md
├── src // 业务源码目录
│ └── index.we
├── tools // 工具目录
│ └── webpack.config.plugin.js
├── web //web 平台目录
│ ├── index.html
└── webpack.config.js // webpack 模块打包配置目录
不过，通过 create 命令创建的 weex 工程默认是不包含 iOS 和 Android 原生工程模版的。如果需要添加原生工程模板，可以切换到 appName 目录后再安装依赖，模版默认会被安装到工程的 platforms 目录下，官方提供的模版默认支持 weex bundle 调试和插件机制。安装命令如下：
weexpack platform add ios // 安装 ios 模板
weexpack platform add android // 安装 android 模板
安装模版完成之后，会在工程目录下增加如下的模版目录。目录结构如下：
├── platforms
│ ├── ios
│ └── android
当需要用到混合开发的时候，就可以使用原生开发环境打开 Android 或 iOS 项目进行原生功能的开发。
开发与运行
使用 create 命令创建 weex 项目时，weex-toolkit 工具已经为我们生成了标准项目结构。此时，打开初始化的 Weex 项目并定位到“/src/index.vue”，该页面是 Weex 的默认首页。代码内容如下
<template>
<div class=”wrapper”>
<image :src=”logo” class=”logo” />
<text class=”greeting”>The environment is ready!</text>
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from ‘./components/HelloWorld.vue’
export default {
name: ‘App’,
components: {
HelloWorld
},
data () {
return {
logo: ‘https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png’
}
}
}
</script>
运行 weex 项目前，需要先使用命令“npm install”来安装项目的依赖，可以在 package.json 文件中查看与项目相关的依赖。然后，在项目的根目录下使用命令“npm run dev & npm run serve”开启 watch 模式和静态服务器。打开浏览器，输入“http://localhost:8081/index.html”即可开启一个预览页面，使用用 Weex 提供的 playground app 扫描生成的二维码即可在在手机上看到页面在手机上的渲染效果，如下图所示。
如果需要在模拟器或真机设备上运行项目，可以使用下面的命令来启动应用程序，并且在运行客户端命令前请先启动服务端服务。
weex run ios // 在 ios 设备上运行
weex run android //Android 设备上运行
需要注意的是，在运行启动命令前，请确保 Android、iOS 所需要的原生运行环境配置正确，并且需要先启动模拟器或连接上移动设备再运行启动命令。
执行启动命令后，如果项目编译过程没有出现任何的错误提示，系统会在运行时要求用户选择一个安装的设备，如下图所示。
如果没有任何错误，将会看到如系下图所示的运行效果。
