WEEX环境搭建

转载请注明出处

本文出自Hansion的博客

WEEX官方网址

一、安装node.js

node.js是weex编译、打包用的基础工具

node.js下载地址

安装完成后在cmd中输入

node -v

npm -v

如果都分别输出了版本号，就代表node.js正确安装了。如果不显示，可以尝试配置环境变量

如果以前安装过node.js，要注意npm的版本号要在5.0.0以上，如果不在，可以运行以下命令升级至最新版本：

npm install [e-mail] -g

二、安装weex-toolkit

安装weex-toolkit 的脚手架工具来辅助开发和调试

为了节省时间，国内开发者使用淘宝npm镜像cnpm来安装weex-toolkit 

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

安装成功后，输入weex命令验证是否安装成功，它会显示 weex 命令行工具各参数

三、创建模板项目并运行

weex create awesome-project

执行完命令后，在当前目录就生成了一个awesome-project项目，它是使用 Weex 和 Vue 的模板项目

我们进入该目录中

cd awesome-project

安装项目依赖

npm install

开启静态服务器

npm run serve

这时会自动弹出网页，打开默认的 weex h5 页面http://localhost:8081/index.html
（端口号可能略有不同）

其中，需要注意的是npm run XXX是执行配置在package.json中的脚本，比如：

"scripts": {
        "start": "npm run serve",
        "build": "webpack",
        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
        "dev": "webpack --config webpack.config.js --watch -d",
        "serve": "webpack-dev-server --config webpack.dev.js --watch --open"
    }

我们刚才所输入的npm run serve，实际上就相当于输入了webpack-dev-server --config webpack.dev.js --watch --open，就像是一些命令的快捷方式，免去每次都要输入很长的的命令。

打开页面的示例代码可以在 src/index.vue 中查看，如下所示：

<template>
  <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
    <text class="desc">Now, let's use vue to build your weex app.</text>
  </div>
</template>
<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
  .logo { width: 360px; height: 156px; }
  .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>
<script>
  export default {
    data: {
      logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

我们可以将它复制到Playground中运行 http://dotwe.org/vue

然后使用playground app扫描生成的二维码，查看在手机上的效果

四、其他错误：

如果遇到了ERR! Error: listen EACCES错误，可能是端口被占用的原因。

info Fri Jan 12 2018 16:24:03 GMT+0800 (中国标准时间)WebSocket  is listening on port 8082

info Fri Jan 12 2018 16:24:03 GMT+0800 (中国标准时间)http  is listening on port 8081

info http://192.168.2.35:8081/?hot-reload_controller&page=hello.js&loader=xhr&wsport=8082&type=we

ERR! Error: listen EACCES 0.0.0.0:8082

我们打开控制台，输入

netstat -ano

然后搜索报错的端口号，看是哪个pid的进程占用了他，我这里是pid=4

在任务管理器中，我们看到pid=4的进程，其实是system进程，其对应的进程描述是NT kernel & system

解决：

运行命令提示符（管理员模式），输入：

net stop http

按y确定

然后输入以下命令即可解决

Sc config http start= disabled