weex的安装和使用——mac环境（一）
2019-03-27 本文已影响0人
马木木_1991
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>
