平台差異
Vue.js 最初是為 Web 平台設計的，雖然可以基於 Weex 開發原生應用，但是 Web 開發和原生開發畢竟不同，在功能和開發體驗上都有一些差異，這些差異從本質上講是原生開發平台和 Web 平台之間的差異，可以通過《Weex 和 Web 平台的差異》了解更多細節和原因。
由於運行平台存在差異，Weex 不支持 Vue 中與 DOM 相關的功能：
- 不支持事件冒泡和捕獲機制，
.prevent、.capture、.stop、.self等事件修飾符在原生環境中無意義。 - 鍵盤事件的
.{keyCode | keyAlias}修飾符在原生環境中無意義。 - 無法通過
vm.$el獲取界面元素，原生環境中沒有 DOM Element。 - 無需自行調用
vm.$mount，默認會將入口組件掛載到原生應用的視圖中。 - 不支持
v-html和v-text指令。
功能差異
僅引入了 Vue Runtime
Vue 除了提供默認的完整包以外，還提供一個更小巧的 vue.runtime.js，在這個文件中移除了模板編譯的相關操作，Weex 中也僅引入 Vue Runtime 的功能，這樣做除了可以減少代碼體積以外，還能減少運行期編譯模板的負擔，提升性能。
具體的差異有：
- 定義組件時不支持使用
template屬性。 - 不支持使用
x-templates。 - 不支持使用
Vue.compile。
隔離多頁面的作用域
Weex 在原生端使用的是“多頁”的實現，不同的 js bundle 將會在不同的原生頁面中執行；也就是說，不同的 js bundle 之間將不同共享 js 變量。即使是 Vue 這個變量，在不同頁面中也對應了不同的引用。
基於這個特性，Vue 中全局功能將只在當前頁面內生效：
Vue.configVue.componentVue.directiveVue.filterVue.mixinVue.use
注：以上接口的功能並未受影響，只是其生效范圍將會限制在同一頁面內。
樣式差異
Web 中的 CSS 非常的靈活，積累了特別多的屬性，支持多種布局方法；這是其優勢，也是瀏覽器性能優化的一個瓶頸。
Weex 中的樣式是由原生渲染器解析的，出於性能和功能復雜度的考慮，Weex 對 CSS 的特性做了一些取舍，使其更符合最佳實踐。
單類名選擇器和作用域
Weex 中只支持單個類名選擇器，不支持關系選擇器，也不支持屬性選擇器。
|
/* 支持單個類名選擇器 */
.one-class {
font-size: 36px;
}
/* 不支持關系選擇器 */
.parent > .child {
padding-top: 10px;
}
/* 不支持屬性選擇器，不支持 `v-cloak` 指令 */
[v-cloak] {
color: #FF6600;
}
|
這個只是對樣式定義的限制，不影響樣式類名的使用，在標簽中可以添加多個樣式類名，如：
|
<template>
<div class="one two three"><div>
</template>
|
組件級別的作用域
在 Weex 中，寫在組件 <style> 里的樣式只能用在當前組件中，默認是 scoped 作用域。為了保持和 Native 的一致性，建議在 .vue文件中寫樣式時，加上 scoped 屬性，即： <style scoped>。
支持的樣式屬性
Weex 支持的樣式特性是 CSS 的子集，並且會不斷擴充；在實現過程中我們參考了 CSS 屬性在瀏覽器中的使用頻率，優先實現其中頻率最高的一些屬性。
Weex 支持了基本的盒模型和 flexbox 布局，以及其他常用樣式，詳情可參考Weex 通用樣式文檔。
在編寫樣式時，還應該注意一下幾點：
- 不需要寫樣式前綴。
- Weex 不支持
display: none;，因此也不支持v-show指令。 - 為了優化樣式解析的效率，樣式屬性暫不支持簡寫，涉及一下屬性：
border、border-(top|bottom|left|right)marginpaddingflex
編譯環境的差異
在 Weex 中使用 Vue.js ，你所需要關注的運行平台除了 Web 之外還有 Android 和 iOS ，在開發和編譯環境上還有一些不同點。針對 Web 和原生平台，將 Vue 項目源文件編譯成目標文件，有兩種不同的方式：
- 針對 Web 平台，和普通 Vue 2.X 項目一樣，可以使用任意官方推薦的方式編譯源文件，如 Webpack + vue-loader 或者 Browserify + vueify 。
- 針對 Android 和 iOS 平台，我們提供了 weex-loader 工具支持編譯
.vue格式的單文件組件；也就是說，目前只能使用 Webpack + weex-loader 來生成原生端可用的 js bundle。
使用 weex-loader
weex-loader 是 Webpack 的一個加載器，使用方法參考其官方文檔。需要提醒的是，如果 Webpack 配置的入口文件是個 .vue 格式的文件的話，還需要額外傳遞 entry 參數，通常設置為 true，表示將當前組件作為入口組件。為了能正常匹配 .vue 文件，Webpack 配置文件中 weex-loader 的匹配規則也需要有所調整。
|
module.exports = {
// 針對 .vue 文件要添加 entry 參數
entry:
'./path/to/App.vue?entry=true',
// 其他配置項 ...
module: {
loaders: [{
// 匹配包含了 entry 參數的 .vue 文件路徑
test:
/\.vue(\?[^?]+)?$/,
loaders: ['weex-loader']
}]
},
}
|
如果使用 .js 文件作為 Webpack 配置的入口文件，則不需要額外配置這些參數，我們推薦使用 Javascript 文件作為編譯的入口文件。
搭建原生開發環境
Weex 項目生成的是原生應用，學習一些開發原生應用的基礎知識，會對你開發 Weex 項目很有幫助。參考《集成 Weex 到已有應用》了解更多信息。