Weex(一):Weex初体验——安装配置环境以及项目新建立
因为之前对网页前端有些许了解,想趁此机会将前端相关的知识都学一学,所以和朋友一起想要参加银联小程序开发大赛,也因此这两天接触了Weex框架以及学习Vue.js,只想说Weex感觉处处是坑,朋友说某乎上也是一片骂声,最后看到阿里自己都不用Weex,我就笑了。先吐槽两句:
1. 银联网页教程与所给文档教程两者根本对不上,该有的都木有,要用的脚架包都是很早之前的,教程安装是行不通的,你只会得到一个404的错误,因为根本找不到网页=_=
2. Weex是Vue的子集,也就是有些Vue能用的Weex拒绝,你强任你强,老子不让用,你说你气不气
此系列是借由Weex学习Vue.js,后续会有Vue.js学习历程。
1.安装以及环境配置
1.先说下Weex安装与配置
第一步:安装配置Node.js,这个官网下载即可,主要是要用npm下载包。(记得将Node.js设置到系统环境变量中)
第二步命令行将npm下载源改为国内源,下载速度会快一点。
npm config set registry https://registry.npm.taobao.org
第三步
npm install weex-toolkit
然后你可能会看到一大堆npm warn 忽略掉他,没有任何影响。
好的,到这里以后都不会有啥问题。
下载结束以后直接命令行继续输入
weex -v
这样就安装成功了。
千万不要像银联的网页文档一样,什么cnpm挂载到私有库,别问,问就挂不上,问就 404 Not Found。
那么接下来就是最常见的Hello World了。
2.IDE选择
博主用的是VScode,相对来说建立项目之后好操作一些。
3.Weex的playground
Weex的playground是Weex推出的在手机端显示界面的软件。此处有一坑,与大家提醒分享一下。后面说到展示再提。
2.项目新建立
1.项目建立
命令行输入以下命令进行项目建立
weex create HelloWorld
图中,ESLint是要从github上下载一些文件,过程会很慢,所以直接pass掉就好,过程选项大致如上(此处感谢朋友的提醒)
同上,忽略它的WARN·······没有影响。
2.安装依赖库
创建完成,进入到该项目根目录下,在第一次运行之前进行依赖库与组件的安装,用以下命令
npm install
此后不用再该项目就不用再次npm install了。
3.运行
结束后就可以开始命令行运行了。(此处有坑!!!)
npm start
项目结构大致如下图(有部分是博主自己添加的)
到此环境配置以及项目就建立好并且能够运行即成功。
运行后会弹出一个页面如下(博主有所修改):
右侧有一个二维码可以用Weex的手机端playground进行扫码手机端显示。(此处有坑!!)
第一个坑:
到运行的时候,出错的地方来了,因为npm start运行之后,系统会开始监听默认或者自己设置的端口,如上图为8081。
报错如下:
这个报错的意思是告诉你 8080端口被占用了。
脱坑操作如下:
这样命令行输入,查询8080端口有什么被哪些进程占用。
netstat -ano|findstr 端口号
效果如下:
找到之后,直接“杀死”进程
taskkill /f /t /im 进程号
第二个坑:
扫码要求必须,手机与电脑处于同一无线局域网络下,即IP地址一样(我的理解),但是有时候总是会出现扫码不成功,出现network error的界面。
脱坑操作:
原因借鉴此博客即可:https://blog.csdn.net/baidu_20758317/article/details/81007077
主要就是因为电脑端安装了虚拟机之类的,会导致Weex找到的IP地址不是真正的IP地址,于是手机与电脑并不处于同一个无线网下造成network error。
到此,关于安装以及建立项目上我遇到的坑以及解决办法就描述如上 ,后续会时不时更新一下博客,不过写Weex的博客,应该不会太多人关注吧·······