Weex 安装

Weex是2016年阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具，Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

1 Weex 安装与初始化

1.1 安装NodeJS和NPM

首先安装nodejs、npm，我曾经已经安装过了，就不再重新安装了。
打开终端，可以查看到node、npm各自的版本。

如下图：

80337687-D57C-411E-986D-E3CF1C56B53F.png

注意：nodejs的版本须大于4.5.0

1.2 安装Weex

• npm install weex-toolkit -g

在终端执行该命令，开始安装weex工具包。安装过程如下图：

07C93237-FA58-481C-B9FF-638D1E17173D.png

等待安装成功后，

• 命令行输入weex，查看是否有命令帮助内容，如果提示没有weex命令，表示weex没有安装好，如下图：

5835597D-608A-4825-A9E5-66332374E437.png

weex 版本为1.0.5

至此，weex-toolkit 已安装成功

1.3 初始化一个项目

• 在桌面新建一个项目目录文件夹
• 在终端cd 到该目录，命令行输入 weex init，这时会自动下载和生成相关文件

初始化后的文件目录 如下图：

A9091FCC-1B68-425F-8CF2-1A80A2A7599B.png

• 运行npm install，安装相关依赖包

安装完相关的依赖包后， 可以发现项目文件目录中，增加了node_modules 模块 如下图：

8260A54F-AFF6-4A52-ADC3-F39B1F19E37C.png

1.4 用IDE打开新建的工程（Webstorm 等）

• 将刚才新建的工程导入webstorm中
• 打开webstorm 的 preferences， 选择 plugins选项， 搜索weex的插件：weex和weex langugge support （用于创建we文件和支持weex语法（VUE）），分别进行安装，
  如下图：

1E8D925C-3ED0-497F-AE74-DAA1D1C91B0E.png

1.5 相关命令

• weex ***.we ： 运行调试xxx页面，支持热加载，默认端口是8081和8082 8082是热加载端口
• npm run build ： build 在package.json定义的脚本命令，执行webpack
• npm run dev ： dev 在package.json定义的脚本命令，执行webpack --watch
• npm run serve ： serve package.json定义的脚本命令，启动serve服务
• weex xxx.we --qr： 运行调试xxx页面，并依据地址url生成二维码，主要是在iOS和Android上查看效果，设备须在同一个局域网中

ok, weex开发相关的工具都已准备好，接下来就是开始一个入门项目了。