1.安装依赖
Weex官方提供了weex-toolkit的脚手架工具来辅助开发和调试。首先,你需要Node.js和 Weex CLi。
安装Node.js方式多种多样,最简单的方式是在 Node.js官网 下载可执行程序直接安装即可。
对于Mac,可以使用 Homebrew 进行安装:
|
更多安装方式可参考 Node.js官方信息
安装完成后,可以使用以下命令检测是否安装成功:
|
通常,安装了Node.js环境,npm包管理工具也随之安装了。因此,直接使用npm来安装weex-toolkit。
npm是一个JavaScript包管理工具,它可以让开发者轻松共享和重用代码.Weex很多依赖来自社区,同样,Weex也将很多工具发布到社区方便开发者使用。
注意: 在weex-toolkit
1.0.8版本后添加了npm5的规范npm-shrinkwrap.json
用于锁定包依赖,故NPM版本<5用户的需要通过npm i npm@latest -g
更新一下NPM的版本,使用前请确认版本是否正确。
|
weex的工具包也支持直接升级子依赖,如:
|
国内开发者可以考虑使用淘宝的npm镜像 - cnpm 安装weex -toolkit
|
提示:
如果提示权限错误(权限错误),使用 sudo
关键字进行安装
|
结束安装后你可以直接使用 weex
命令验证是否安装成功,会它显示 weex
命令行工具各参数:
第二步:初始化
然后初始化Weex项目:
|
执行完命令后,在 awesome-project
目录中就创建了一个使用Weex和Vue的模板项目。
第三步:开发
之后我们进入项目所在路径,weex-toolkit已经为我们生成了标准项目结构。
在 package.json
中,已经配置好了几个常用的npm脚本,分别是:
build
:源码打包,生成JS Bundledev
:webpack watch模式,方便开发serve
:开启HotReload服务器,代码改动的将会实时同步到网页中
我们先通过 npm install
安装项目依赖。之后运行根目录下的 开启观看模式和静态服务器。npm run dev & npm run serve
然后我们打开浏览器,进入 http://localhost:8080/index.html
即可看到weex h5页面。
初始化时已经为我们创建了基本的示例,可以我们在 src/index.vue
中查看。
代码如下所示:
|
出现这个你已经弄好了开始weex开发