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天免費，我們可以使用在線激活：

終於可以專心的敲代碼了~