Weex环境配置以及踩坑记录

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

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

我是Weex官网

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

安装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

出现了神奇的错误，看不懂，百度一下，发现这样的错误都是出在镜像，有网友说这个镜像不完整…简直神坑，没办法，只能老老实实用npm了。

先卸载之前安装的：

 npm uninstall -g weex-toolkit

然后硬着头皮安装，这一步会很慢！

 npm install -g weex-toolkit

这次依然一切顺利，然后同样顺利通过weex -v验证，验证weex命令，终于没问题了：

第一个Weex项目

找个合适的路径：

weex init

生成如下文件：

看一眼package.json：

{
  "name": "weex",
  "description": "weex",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "keywords": [
    "weex",
    "vue"
  ],
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "serve": "webpack && node build/init.js && serve -p 8080",
    "debug": "weex-devtool"
  },
  "dependencies": {
    "vue": "^2.1.8",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1",
    "weex-vue-render": "^0.11.2"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "ip": "^1.1.4",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5"
  }
}

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

npm install

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

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

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

weex foo.we

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

20170929 更新

之前一直用visual studio练习写Weex，但是发现没有代码提示真的是痛苦，很多语法都不熟悉，于是找了一下合适的IDE，最后锁定了Webstorm。

安装Weex、Weex Language Support插件：

然后就可以“为所欲为”了！

最后，因为Webstorm只有30天免费，我们可以使用在线激活：

终于可以专心的敲代码了~