WEEX系列 环境搭建

WEEX系列文章之环境搭建

和一步一起从前端视角聊一聊WEEX

如果你只想试试 weex 的语法写个 hello world 啥的， 在dotWe线编辑器上玩玩就够了。如果你想更深入的学习， 显然是需要搭建本地开发环境的。
本小结内容：安装官方脚手架weex-toolkit、下载Weex Playground、解决浏览器跨域问题。

weex-toolkit

脚手架让我们更专注于业务代码，节约开发环境构建成本，提供一定的灵活。同时呢，在能力没达到一定的水平时候，不建议去乱搞这些东西。但，像webpack这种工具还是需要学习和掌握的。 weex-toolkit对于weex，就相当于create-react-app对react，vue-cli对于vue的地位。

安装 weex-toolkit 的前置条件是安装node > 6。

执行npm install -g weex-toolkit有好多网友不推荐大家使用 cnpm 安装说是有坑，大家视情况而定

顺利的话，使用weex -v检测安装是否成功。

创建一个 weex 项目

weex create weex-demo

npm install

1. 一切顺利的话，再执行 npm start 看看效果。

如果你已经看到了 hello world，那么恭喜你，你已经掌握了weex 50%的知识。

Weex Playground

既然学习的是原生开发，我们怎能甘心只在浏览器上看效果，但是身为一个 FE 又不太会搞 Android Studio 和 Xcode这些原生的东西，weex 工程师足够给力为我们提供了Playground下载应用然后扫一扫屏幕上的二维码，就是真的原生应用了。这个 playground的原理，可以回顾一下上篇文章中weex原理图。只不过是咱们个人开发机在充当 Server 的角色而已。
使用playground条件 手机和开发机处于同一网段?

前端跨域

一个完整的项目怎能少了网络请求。在浏览器上调试的时候，很可能会遇到跨域的问题，前端可以通过 webpack-dev-server转发一下请求，后端服务是不会出现跨域屏蔽的，跨域只是浏览器的一种保护机制，但是感觉还是有些麻烦，既然是浏览器限制，只要打破限制就可以了。在这里推荐大家使用chrome插件Allow-Control-Allow-Origin: *
准备好上述三个环境后，我们就可以正式进入 weex 的学习之旅了。

NEXT

我的第一个weex demo

欢迎大家指正批评、或留言。