开发环境搭建

第一步：安装依赖

首先，你需要 Node.js 和 weex-toolkit。weex-toolkit 是Weex 官方提供的脚手架工具来辅助开发和调试。
安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。
安装完成后，打开cmd然后使用以下命令检测是否安装成功：

node -v
nmp -v

出现上图所示说明安装成功
通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。

npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。

npm install weex toolkit -g
weex -v //查看weex当前版本

先执行第一行代码成功之后执行第二行代码查看weex toolkit是否安装成功。

如果网络不好的情况下可以考虑使用淘宝镜像cnpm安装，可能会失败多尝试几次即可。
cnpm install weex toolkit -g
如果提示权限错误（permission error），使用 sudo 关键字进行安装
sudo cnpm install weex toolkit -g
安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：
weex

第二步：初始化

然后初始化 Weex 项目：
weex create weexDemo
执行完命令后，在 weexDemo 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

第三步：开发

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

在 package.json 中，已经配置好了几个常用的 npm script，分别是：
build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启HotReload服务器，代码改动的将会实时同步到网页中
我们先通过 npm install 安装项目依赖。

截图5
之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。
然后会自动打开浏览器，或输入提示的地址 即可看到 weex h5 页面。

初始化时已经为我们创建了基本的示例，我们可以在 src/index.vue 中查看。
代码如下所示：

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 424px;
    height: 200px;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 50px;
    color: #41B883;
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: #727272;
  }
</style>