平台差异
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 到已有应用》了解更多信息。