如何在浏览器中预览weex代码

[blue0125]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。

weex-toolkit

我们强烈建议你使用weex-toolkit在浏览器中预览weex代码。这个工具基于NodeJS,所以你需要先安装Node。请从https://nodejs.org/en/download/stable/网站下载安装最新稳定版本的Node。
接下来你就可以通过npm安装weex-toolkit

npm install -g weex-toolkit

通过在终端中输入weex检查是否可以运行，通常你应该看到如下的帮助文字:

Options:
  --qr     display QR code for native runtime, 
  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
  ......
  --help  Show help

假如一切运行正常，终端导航到你想预览的xxx.we所在目录，输入命令:

weex xxx.we

浏览器窗口将会自动打开显示你想预览的页面：

[hugojing]

Well done!

[lvscar]

thx! 已经部署到Weex官方文档站 http://alibaba.github.io/weex/doc/how-to/preview-in-browser.html 。
以后的翻译修改完成后可以直接通过给Weex主仓库 doc分枝 提交PR 。
再次感谢.

[xu17]

可是为什么我显示的是源代码
而不是上图？？？好郁闷啊啊啊啊啊

[cryzzchen]

@xu17 你应该是看到了webpack编译过的代码，看一下路径

[1903514970]

@blue0125 你好，我的浏览器显示没有标尺，只有界面，是需要设置什么吗？

[yundongbot]

@1903514970 截图是旧版 Chrome。新版 Chrome 默认不显示标尺，需要在 Devtools -> settings 勾选 show rules

[yundongbot]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。