步入weex的第一步，創建一個理解模型。

環境搭建

## node下載安裝
## weex-toolkit 安裝weex-toolkit腳手架（debug 和weexpack）
## weex create awesome-project
## npm run dev
## 另起 npm run serve
## weex platform add android 安裝安卓平臺
## weex run android鏈接手機調試，部署到安卓
複製代碼

調試指令

## weex src/foo.vue 實時預覽，能夠手機下載APP掃碼調試
## weex debug 調試模式，能夠在瀏覽器上查看頁面代碼
複製代碼

vue在weex與在web中的差別

1. 不支持事件冒泡和捕獲機制，.prevent 、.capture 、.stop 、.self 等事件修飾符在原生環境中無心義。
2. 鍵盤事件的 .{keyCode | keyAlias} 修飾符在原生環境中無心義。
3. 無需自行調用 vm.$mount，默認會將入口組件掛載到原生應用的視圖中。
4. 不支持 v-html 和 v-text 指令
5. 定義組件時不支持使用 template 屬性。
6. 隔離多頁面的做用域(config,全局註冊的東西失效)
7. Weex 不支持 display: none;，所以也不支持 v-show 指令
8. vue-router 自身會對環境作校驗，若是發現沒有瀏覽器的 API，vue-router 會自動強制進入 abstract 模式，因此在使用時只要不寫 mode 配置便可。默認 vue-router 會在瀏覽器環境中使用 hash 模式，在移動端原生環境中使用 abstract 模式。
9. 在 Weex 中，你必須使用編程式導航來編寫頁面跳轉邏輯。push填充，replace替換
10. 在weex中使用ready生命週期代替mounted
11. dom裏面的變量綁定取消v-bind使用{{}}，包括v-for這種指令帶藥帶上{{}}
12. 取消refs使用id+$el(id)
13. data使用對象，而不是函數（由於組件隔離）
14. slot使用content替代
15. 原生事件例如@click用onclick替代
16. v-for移除index使用value:key(值在第一位)
17. 組件的事件觸發由@emit改成broadcast，其餘頁面使用$on監聽

weex與web開發的區別

樣式差別

1. 爲了優化樣式解析的效率，樣式屬性暫不支持簡寫，涉及一下屬性：border、border-(top|bottom|left|right)、margin、padding、flex
2. eex 對於長度值目前只支持像素值，不支持相對單位（em、rem）。
3. Weex 盒模型的 box-sizing 默認爲 border-box，即盒子的寬高包含內容、內邊距和邊框的寬度，不包含外邊距的寬度。
4. 在 Weex 中，Flexbox 是默認且惟一的佈局模型，因此你不須要手動爲元素添加 display: flex; 屬性。
5. Weex 目前不支持 z-index 設置元素層級關係，但靠後的元素層級更高，所以，對於層級高的元素，可將其排列在後面。
6. 若是定位元素超過容器邊界，在 Android 下，超出部分將不可見，緣由在於 Android 端元素 overflow 默認值爲 hidden，但目前 Android 暫不支持設置 overflow: visible。
7. Weex 支持四種僞類：active, focus, disabled, enabled
8. background-image 優先級高於 background-color，這意味着同時設置 background-image 和background-color，background-color 被覆蓋。 不要使用 background 簡寫
9. 全部組件都支持 active, 但只有 input 組件和 textarea 組件支持 focus, enabled, disabled。
10. box-shadow僅僅支持iOS

單類名選擇器和做用域

Weex 中只支持單個類名選擇器，不支持關係選擇器，也不支持屬性選擇器。

編譯環境的差別

1. 針對 Web 平臺，和普通 Vue 2.X 項目同樣，可使用任意官方推薦的方式編譯源文件，如 Webpack + vue-loader 或者 Browserify + vueify 。
2. 針對 Android 和 iOS 平臺，咱們提供了 weex-loader 工具支持編譯 .vue 格式的單文件組件；也就是說，目前只能使用 Webpack + weex-loader 來生成原生端可用的 js bundle

入口文件

1. weex-loader 是 Webpack 的一個加載器，使用方法參考其官方文檔。須要提醒的是，若是 Webpack 配置的入口文件是個 .vue 格式的文件的話，還須要額外傳遞 entry 參數，一般設置爲 true，表示將當前組件做爲入口組件。爲了能正常匹配 .vue 文件，Webpack 配置文件中 weex-loader 的匹配規則也須要有所調整。
2. 若是使用 .js 文件做爲 Webpack 配置的入口文件，則不須要額外配置這些參數，咱們推薦使用 Javascript 文件做爲編譯的入口文件

Weex 實例變量

每一個 Weex 頁面的 JS 上下文中都有一個相互獨立的 weex 變量，用來持有當前 Weex 頁面相關的單例內容或方法。用來獲取某個 native module 的全部方法