安装开发环境
Nodejs
使用brew安装
$ brew install node
下载dmg安装
https://nodejs.org/en/
安装完成后，可以使用以下命令检测是否安装成功：
$ node -v
v6.3.1
$ npm -v
3.10.3
npm
npm是 JavaScript 的包管理器，它可以让开发者轻松共享和重用代码。
weex
使用npm安装weex-toolkit：
$ sudo npm install -g weex-toolkit
$ weex -v
v1.0.4
- weex-builder : v0.2.6
- weex-previewer : v1.3.7
安装结束后可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：
$ weex
Usage: weex <foo/bar/we_file_or_dir_path> [options]
选项：
--port http listening port number ,default is 8081 [默认值: 8081]
--wsport websocket listening port number ,default is 8082 [默认值: 8082]
--entry the entry file in a folder
where <command> is one of:
init create a vue project
debug start weex debugger
compile compile we/vue file
create create a weexpack project
platform <add|remove> <ios|android> add/remove ios/android platform
plugin <add|remove> <pluginName> add/remove weexplugin
run <ios|android> build your ios/android app and run
weex <command> --help help on <command>
开发
初始化
-
初始化
weex项目：$ weex init hello-weex -
安装项目依赖：
$ npm install 运行
npm run dev和npm run serve开启watch 模式和静态服务器。打开浏览器，进入
http://localhost:8080即可看到 weex h5 页面。
编写代码
初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。这是我们编写业务逻辑最重要的一个文件。关于 Weex 语法部分，可以直接参考 Vue.js 的开发文档。
代码如下所示：
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { font-size: 48px; }
.logo { width: 360px; height: 82px; }
</style>
<script>
export default {
data: {
logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
target: 'ltryee'
},
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
}
}
}
</script>
打包
使用webpack打包：初始化工程时weex已经替我们创建了webpack的配置文件webpack.config.js，直接运行webpack即可打包。
$ webpack
Hash: 575652f0448ae5787cdc28013bc84276b8ea1e7f
Version: webpack 1.14.0
Child
Hash: 575652f0448ae5787cdc
Version: webpack 1.14.0
Time: 1102ms
Asset Size Chunks Chunk Names
app.web.js 15.4 kB 0 [emitted] app
+ 10 hidden modules
Child
Hash: 28013bc84276b8ea1e7f
Version: webpack 1.14.0
Time: 1088ms
Asset Size Chunks Chunk Names
app.weex.js 4.43 kB 0 [emitted] app
+ 5 hidden modules
打包完成之后会在dist目录下生成两个文件，其中app.weex.js即为下发给终端的JS bundle。
$ ll dist
total 48
-rw-r--r-- 1 vectorliu staff 15K 4 1 15:58 app.web.js
-rw-r--r-- 1 vectorliu staff 4.3K 4 1 15:58 app.weex.js
