weex的安装和使用——mac环境（一）

weex是阿里旗下致力于一套代码多平台使用的框架。详细来说就是使用js，css等前端技术实现代码和逻辑，然后使用各平台对应的sdk转化成平台相应的代码。

• weex的官方地址：https://weex.apache.org/zh/
• vue.js官方地址：https://cn.vuejs.org/v2/guide/

特别说明：如果你之前没有接触过前端知识，那你还得先去学习一下html&css和js，以下是w3c上的两个闯关链接，过一遍大概一天时间，应该就差不多能熟悉。

• html&css教程：https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp
• js教程：https://www.w3cschool.cn/codecamp/list?pename=basic_javascript_camp
• css布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

接下来开始环境配置：

1，先安装Homebrew，为什么安装这个东西？因为方便，安装好这个后，再安装node等就很省心。打开如下链接即可进入Homebrew官网，复制如图链接，打开mac的终端，粘贴上即可，他会自动安装。安装过程中会卡在这：Press RETURN to continue or any other key to abort，这时候按回车键即可。直到出现Installation successful!即表示安装成功。输入命令：brew -v 查看当前安装的版本。如果展示正常的版本，如：Homebrew 2.0.6，则表示真正可用了。

homebrew链接

• Homebrew官网链接：https://brew.sh/

2，执行：brew install node 安装node完成后执行：node -v 查看node版本，如果显示如下：v11.12.0则表示安装成功。

3，执行：npm install -g weex-toolkit@beta 安装weex脚手架。

4，执行：weex -v 安装完成后执行 weex help，如果显示所有weex命令，则表示安装成功。

5，打开weex官网，如下图所示位置下载并安装weex开发工具weex studio。

weex studio

6，打开weex studio，新建weex项目，如下图所示

新建weex项目

7，weex项目需要注意的点如下：

• 打开/configs/config.js文件，找到useEslint: false,将true改为false。
• 打开/src/pages/index/entry.vue文件，这是程序的入口。

8，新建一个简单的vue文件，因为程序是默认以ertry.vue文件作为入口，所有凡是文件夹下有这个文件的，都会生成一个入口。所有在src/pages文件夹下新建一个文件夹zlf（命名随意），然后在该文件夹下新建一个ertry.vue的文件，拷贝上如下代码即可。然后点击右上角的绿色执行按钮即可。

<template>
    <div class="wrapper">
        <div class="container">
        <image class="image1" resize="contain" placeholder="https://vuejs.org/images/logo.png" 
        src="https://gw.alicdn.com/tfs/TB1dZ4WowoQMeJjy0FnXXb8gFXa-950-1267.jpg"></image>
        </div>
        <text >我爱你</text>
    <text>我想你</text>
    <image src="https://gw.alicdn.com/tfs/TB1dZ4WowoQMeJjy0FnXXb8gFXa-950-1267.jpg" style="width:500px;height:500px"></image>
    </div>
</template>

<style scoped>
.wrapper {
  justify-content: center;
  align-items: center;
}
.container {
  border-width: 5px;
  border-style: solid;
  border-color: rgb(0, 180, 255);
  background-color: #bbb;
}
.image1 {
  width: 600px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  height: 400px;
}
</style>

9，真机运行的话，可以扫描右下角的二维码，在这之前得在weex官网上安装对应的app，使用这个app上的扫描二维码功能进行扫码，这个app在官网-工具中。还要确保手机和电脑在同一网络环境下才可以。

到此为止，weex简单的环境配置和安装使用介绍完毕，如果有发现错误欢迎指正我及时修改，如果有好的建议欢迎留言。如果觉得对你有帮助欢迎给小星星，谢谢。