Weex 是使用Node.js
开发构建的,所以需要我们的电脑上安装有 Node.js
第一步:安装依赖
安装 Node.js 方式多种多样,最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。官网下载地址https://nodejs.org/en/
安装完成后,可以使用以下命令检测是否安装成功:$ node -v
v6.3.1
$ npm -v
3.10.3
2.安装 weex-toolkit
通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。注意: weex-toolkit 在 1.0.1 之后才支持初始化 Vue 项目,使用前请确认版本是否正确。
$ npm install -g weex-toolkit
$ weex -v
v1.0.3
weex-builder : v0.2.4
weex-previewer : v1.3.4
国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit
提示:如果提示权限错误(permission error),使用 sudo 关键字进行安装
$ sudo cnpm install -g weex-toolkit
安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数:
第二步:初始化项目
然后初始化 Weex 项目: weex init awesome-project
执行完命令后,在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。
第三步:开发
这里有一份中文weex文档:http://www.shouce.ren/api/view/a/11585
开发完成后,在项目根目录下执行 npm install 安装项目依赖的js库。
然后输入:npm run build 同步在dist目录下创建*.js文件(index.we 转换成->index.js)
第四步:部署
npm run serve 开启一个端口8080的服务
接着打开浏览器在地址栏输入:localhost:8080就可以出现效果了
还有一种方式打开这个.we文件看到效果就是在
src文件夹下面开启cmd输入:weex Demo.we(就是你项目名)就会自动浏览器渲染效果
还可以在手机上显示这个效果:
进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!这个应用在这里下载:http://alibaba.github.io/weex/download.html
再在这个目录下打开cmd 输入:npm run dev 这个是开启监听.we文件的改动
也就是说我们在src目录下:用记事本(其他编译软件也可以)打开.we文件把那个HelloWeex 改成Helloword接着刷新网页就会改变文本;手机上刷新也会跟着改变!