Weex填坑笔记(1)-环境搭建及入门

很长时间没有码文章了,感觉笔头都要生锈了,作为2017年的开端,决定还是多写点什么。
正好最近在调研Weex,React Native风头正劲,加上与vue的联姻,和马上入住的apache,虽然Weex目前坑还比较多,但对其未来的发展还是有满心的期待的,也希望Weex能够有越来越好的发展,希望越来越多的同学能够加入学习的行列。
这个系列的文章,计划从入门接触到完成一个完整的实例,中间所遇到问题的会在此做记录,就权当抛砖引玉了,有错误之处,请各位同学不吝赐教。

环境搭建

对于环境搭建和入门,想说的是,官方的教程还是挺靠谱的,只要照着做基本上就行了,这边主要就是补缺补漏,由于笔者使用的是mac环境,下面以及后面的所有文章都以mac环境为准。

1、如果没有node js环境,就先进行安装,对brew不熟悉的同学请自行google脑补

brew install node

2、有了nodejs环境,就可以使用npm来安装相关包了,weex提供了一个weex-toolkit命令行工具,国内的朋友,可以先安装一个cnpm来使用,不然那速度很是酸爽,另外需要注意这边一定要安装beta版本,因为老版本是不支持vue的方式开发,后续weex的开发方式都会逐渐往vue方式转变,所以还是不建议使用老版本了

cnpm install -g weex-toolkit@beta

开发入门

1、接下来就可以开始使用命令行创建一个项目骨架,注意这个会在当前目录下创建一个项目名称命名的目录

MacBook-Air-2:weex xxxx$ weex init helloweex
prompt: Init your Project:  (helloweex)
file: /Users/xxxx/Source/weex/helloweex/.babelrc created.
file: /Users/xxxx/Source/weex/helloweex/.eslintrc created.
file: /Users/xxxx/Source/weex/helloweex/.gitignore created.
file: /Users/xxxx/Source/weex/helloweex/README.md created.
file: /Users/xxxx/Source/weex/helloweex/app.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/phantom-limb.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/qrcode.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/qrcode.min.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/style.css created.
file: /Users/xxxx/Source/weex/helloweex/assets/url.js created.
file: /Users/xxxx/Source/weex/helloweex/build/init.js created.
file: /Users/xxxx/Source/weex/helloweex/index.html created.
file: /Users/xxxx/Source/weex/helloweex/package.json created.
file: /Users/xxxx/Source/weex/helloweex/src/foo.vue created.
file: /Users/xxxx/Source/weex/helloweex/webpack.config.js created.
file: /Users/xxxx/Source/weex/helloweex/weex.html created.

中间可以看到一个项目名称的提示框,不用改变直接回车就好,然后就可以看到创建了许多文件。

2、进入目录,安装依赖包

cd helloweex
cnpm install

安装完成后会发现node_modules目录下多了很多相关的依赖包

3、接下来就可以尝试启动观看效果了

#先启动开发模式,开发模式不会启动web服务,只是会自动监控文件的变化,刷新浏览器就可以更新,方便开发
npm run dev
#再新建一个窗口,并且进入到helloweex目录,启动web服务
npm run serve

打开浏览器访问:http://localhost:8080 就能看到效果了

4、src目录下的foo.vue就是这个界面的源码,可以修改后刷新看看效果。
5、weex有提供了一个playground app,安装后可以直接扫描那个二维码在手机上查看效果。

工具推荐和有用的链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容