Weex入门(一) 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指令检查

$ weexUsage: weex [options] Usage: weex init [projectName]选项： --porthttp listening port number ,default is 8081[默认值: 8081] --wsportwebsocket listening port number ,default is 8082[默认值: 8082] --outputto build the js bundle to the specify a path [默认值: "no JSBundle output"]Usage:weex where is one of:debugstart weex debugger compilecompile we/vue file runrun your projectweex --helphelp 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中改写代码

.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; }

【Weex入门(一)】三、运行结果