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的博客，应该不会太多人关注吧·······