weex学习(一):搭建开发环境

主要参照官方文档：http://weex.apache.org/cn/guide/set-up-env.html

中间遇到一些问题，在这里顺便记录一下。

1、安装所需环境

node.js与weex-toolkit就不细说了，按照官网来即可

安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。

对于 Mac，可以使用 Homebrew 进行安装：

brew install node

更多安装方式可参考 Node.js 官方信息

安装完成后，可以使用以下命令检测是否安装成功：

$ node -v

v6.3.1

$ npm -v

3.10.3

通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。

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

注意: weex-toolkit 在 1.0.1 之后才支持初始化 Vue 项目，使用前请确认版本是否正确。

$ npm install -g weex-toolkit

$ weex -v

v1.0.3

weex-builder : v0.2.4

weex-previewer : v1.3.4

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install -g weex-toolkit

提示：

如果提示权限错误（permission error），使用 sudo 关键字进行安装

$ sudo cnpm install -g weex-toolkit

安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：

到这里，安装都是很顺利的，其中node.js的安装，建议去官网,按照自己的系统环境选择下载安装即可。

第二步：初始化

然后初始化 Weex 项目：

$ weex init awesome-project

执行完命令后，在 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 模式和静态服务器。

建议全部用sudo权限运行，这里有点小问题，dev与serve都开不起来，需要安装webpack

$ npm install webpack -g 

前面加上sudo，即可安装完成。

这里要注意下，run dev开启watch模式时是不会自己结束的，需要自己control+C结束，然后再run serve开启服务。每次改动vue文件，需要应用的话，都需要跑一遍run dev跟serve更新最新的文件信息。只run serve重启服务，是不会更新的。

（使用weex xxx.vue进行预览模式的话是不用重启的，直接实时刷新的，调用这个命令同样有可能报权限错误，加上sudo即可。）

服务器跑起来之后就可以进入 http://localhost:8080/index.html 即可看到 weex h5 页面。 

初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。

weex编辑的话目前用自己顺手的代码编辑器编辑就行了。