Weex与Vue集成到Android简单项目搭建

Weex 入门 简单的项目搭建

一. Vue.js环境配置

1.安装nodejs

安装配置详情点击https://www.runoob.com/nodejs/nodejs-install-setup.html

2.接下来用命令检查一下以上是否安装成功

在cmd命令中输入

命令 node -v 检查 node版本 ，如出现版本说明没有问题了

命令 npm -v 检查npm版本，如出现版本说明也可以了

3.安装webpack

在cmd命令中

命令： npm install webpack -g

注：在安装过程中可能会出现安装失败的情况:

1）.可能是版本原因，那么执行命令升级版本

命令：npm install -g npm

2）.node的缓存问题，那就清除一下缓存

命令：npm cache clean -f

3）.重新安装 执行命令：npm install webpack -g

4.安装vue-cli脚手架

命令：npm install vue-cli -g

二.Weex环境配置

1.全局安装weex-toolkit

命令：npm install weex-toolkit -g

2.将 weex 安装路径配置至系统环境变量中

3.配置好以后在cmd命令中输入

命令：weex -v

如出现版本说明没有问题了

三 weex 项目创建

1.创建一个weex项目

命令：weex init app(app是你的项目名称)

注：这里不用create 只用init

1.）在安装项目的时候会让你选择好多

执行创建项目命令后 会出现以下信息，直接回车就好，到最后一步的时候让选择y/n的时候 选 n

选择n以后会出现新的选择，继续n ，这个是比较坑的，如果你选了y那么你的js文件会有缩进新 规范，一个缩进不对就会报错。这里我是选择n

这个就可以选择第一项就OK了 直接回车，然后等待项目自动创建！这是个进度条，耐心等待就好了！

2）OK了，项目已经建好了，接下来安装依赖的第三方js包

首先通过命令进入到你新建的项目：cd app(我这里项目名称是aqq)

进来以后呢 执行安装依赖的命令：npm install

依赖已经安装完毕 ，执行命令：npm start 试下效果

如果跟我的图一样说明你已经成功了！

这时你的cmd命令是这个样子的

Ctrl+C 可以退出 然后继续下一步

3）接下来就是要添加平台了，Android跟IOS平台

命令如下：weex platform add android 安卓的

weex platform add ios IOS的

如图所示，Android平台已经成功添加

打开你项目所在目录看一下你建的项目的样子吧

3）现在在Android studio中打开项目

打开后不要用Android 默认模式展示，这样的话是一片空白，选择project模式

好了，一个项目完整的展现出来了

4）接下来告诉你怎么去运行项目

File---New--Import Project 然后选择你项目中的 platforms文件下的Android ，点击OK

这样会弹出一个新的项目

如果新的窗口弹出如下窗口的话

点击关闭，先不要去更新！防止你更新以后项目不能用了！

新的窗口如下

 

好了，这样一个weex与vue集成到Aanroid的项目就完成了。