Weex入门(一)

一、搭建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   [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 

where  is one of:

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

weex   --help      help on 

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

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中改写代码

三、运行结果

运行结果

log