一、搭建Node.js环境

1、安装node的常见方法有两种

• 通过HomeBrew安装
• 去官网下载安装包
  安装包

2、两种方法的区别

• 两种方法都试了一下，发现获得node、npm版本不一致，官网下载的版本会低一点
• 且官网下载的版本，后面会遇到一些问题，所以我重新用HomeBrew装了一遍

3、安装HomeBrew

• 在终端输入以下指令

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 产看版本 brew -v
• 卸载 HomeBrew

    - cd `brew --prefix`
    - rm -rf Cellar$ brew prune
    - rm -rf Library .git .gitignore bin/brew README.md share/man/man1/brew
    - rm -rf ~/Library/Caches/Homebrew  
    //如果没有权限，指令前加sudo

4、安装Node.js

• brew install node
• 查看安装结果
  • node -v
  • npm -v

5、使用 npm 来安装 weex-toolkit

• **注意: **weex-toolkit 目前仅有最新的 beta 版本开始才支持初始化 Vue 项目，使用前请确认版本是否正确。
• npm install -g weex-toolkit@beta

国内开发者可以考虑使用淘宝的 npm 镜像cnpm

$ npm install -g cnpm
$ cnpm install -g weex-toolkit@beta

• 如果提示权限错误(permission error)，使用 sudo 关键字进行安装

sudo cnpm install -g weex-toolkit@beta

• 调用weex指令检查

$ weex

Usage: weex <foo/bar/we_file_or_dir_path>  [options]
Usage: weex init [projectName]

选项：
  --port    http listening port number ,default is 8081           [默认值: 8081]
  --wsport  websocket listening port number ,default is 8082      [默认值: 8082]
  --output  to build the js bundle to the specify a path
                                                  [默认值: "no JSBundle output"]

Usage:weex <command>

where <command> is one of:

       debug               start weex debugger
       compile             compile we/vue file
       run                 run your project

weex  <command> --help      help on <command>

二、初始化项目(与官网一致)

1、初始化项目

$ weex init awesome-project

2、安装项目依赖

npm install --unsafe-perm=true

• 这里不要忘了--unsafe-perm=true，否则会加载失败

3、开启watch 模式

npm run dev

4、开启静态服务器

npm run serve

5、在浏览器中查看

 http://localhost:8080/index.html

6、我们可以在src/foo.vue中改写代码

<template>
  <div class="wrapper">
    <text class="weex">Hello Weex !</text>
    <text class="vue">Hello Vue !</text>
  </div>
</template>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .weex {
   font-size: 60px;
   text-align: center;
   color: #1B90F7;
  }
  .vue {
   font-size: 60px;
   text-align: center;
   margin-top: 30px;
   color: #41B883;
  }
</style>

三、运行结果

运行结果 log