Windows如何配置Weex环境以及踩坑记录

公司这半年开始在Weex上发力,作为新人自然要赶紧学习一下。

Weex

这周照着Weex官网教程配置环境,发现官网的教程过于顺畅,期间有不少坑,都没说明,一路摔得头破血流,在这里记录一下。

我是Weex官网

Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先,你需要 Node.js 和 Weex CLi,下面都是针对Windows环境的。

Weex

安装Node.js

首先在Node.js官网下载安装Node.js。

安装完成后,配置环境变量:

计算机–>系统属性–>高级系统设置–>环境变量:

添加Node.js的安装目录,例如我的是:C:\Program Files\nodejs\

然后查看Node.js和npm是否安装成功:

WIN+R调出命令行工具:

$ node -v v8.4.0 $ npm -v 5.3.0

则安装成功。

安装weex-toolkit

到这里,坑来了。

官网上明确注明:

这里写图片描述

哦,我是国内开发者,那就用镜像好了,于是开始安装cnpm。

速度果然快,顺顺利利的安装好了,然后确认安装是否成功:

$ weex -v v1.0.3 weex-builder : v0.2.4 weex-previewer : v1.3.4 <

可以,继续验证:

$ weex C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\src\package\NpmPackage.js:50 throw new Error('resolve path error:'+this.path) ^ Error: resolve patherror:C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._weex-previewer at NpmPackage.resolve (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xto olkit\src\package\NpmPackage.js:50:23) at Command.run (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolkit\s rc\Command.js:43:13) at XToolkit._done (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtoolki t\src\xtoolkit.js:149:36) at process.nextTick (C:\Users\SQWB\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._xtoolkit@0.2.7@xtool kit\src\xtoolkit.js:90:22) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9) at Module.runMain (module.js:606:11) at run (bootstrap_node.js:393:7) at startup (bootstrap_node.js:150:9) at bootstrap_node.js:508:3

常用的命令都在scripts里,这里还要先安装依赖:

npm install

之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器

然后我们打开浏览器,进入:8080/index.html即可看到 weex h5 页面。

我们还可以使用weex命令,一键完成上述步骤,这里拿自动创建的foo.we文件为例:

weex foo.we

浏览器会自动弹出该页面,以后当你每次修改了foo.we文件,浏览器会自动热更新!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。