步入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 的全部方法