Weex 快速上手

“工欲善其事，必先利其器”，学习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所需要的原生运行环境配置正确，并且需要先启动模拟器或连接上移动设备再运行启动命令。

执行启动命令后，如果项目编译过程没有出现任何的错误提示，系统会在运行时要求用户选择一个安装的设备，如下图所示。

如果没有任何错误，将会看到如系下图所示的运行效果。