2018-01-23 weex 学习日记（一）weex环境搭建（

基础概念

• Homebrew： macOS套件管理器
• npm：javaScript 包管理工具
• weex-toolkit：官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能 //可以学习一下webpack 以后可以自己定义脚手架 其中好多博客就讲到 这个东西不完整
• Sublime Text：个人最常用的
• cocoaPods：iOS开发者就不用我多说了吧
• .vue：weex创建的文件类型 以前是.we

一、搭建开发环境

1、安装Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安装Node
brew install node
3、检测是否安装成功，目前为v7.7.3
node -v
4、npm安装weex-toolkit
npm install -g weex-toolkit
*可能会出现权限不够，用sudo执行；
<code>sudo npm install -g weex-toolkit</code>
*可能会出现Vue未安装警告，不用管。
查看版本，目前为v1.0.4
weex -v
验证是否安装成功
[图片上传中...(image.png-5189f0-1516715214520-0)]
出现下图表示成功，其中命令需要熟练使用。

image.png
//其实这个就是前端开发的 环境 然后根据你使用的库 导入就行（vue或者 react）
接下来就是试一下新学习一门语言的惯例吧 hello word 吧
1、使用Sublime创建一个名为helloWorld.vue文件，添加代码：
<template>
<div>
<text class="text">Hello World!</text>
</div>
</template>
保存。
2、打开Terminal，cd到helloWorld.vue所在目录，执行命令：
weex preview helloWorld.vue
浏览器自动打开一个新的标签页，展示helloWorld.vue的执行效果：
image.png
*链接中的hot reload，验证了热更新
脚手架会自动打开一个网页
3、上面的示例只是一个非常简单的雏形，而一个比较完整的Weex程序包括三个部分：模板（Template）、样式（Style）和脚本（Script）。这也是对应前端开发中的 js 和 CSS 用Sublime 接下来试一下 官方给出的 模板吧

<template>
<div>
<text class="title" onclick="onClickTitle">Hello World</text>
</div>
</template>
<style>
.title { color: red; }
</style>

<script>
module.exports = {
methods: {
onClickTitle: function (e) {
console.log(e);
alert('title clicked.');
}
}
}
</script>

保存。weex preview helloWorld.vue
Hello World 文字颜色为红色，点击弹框提示框。