Weex 开发环境搭建 for mac

第一步：安装Node环境

1.1 安装Homebrew

Homebrew是Mac OSX上的软件包管理工具，能够在Mac中方便的安装和卸载软件。

安装方式：打开终端，输入以下命令：

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

检查是否安装成功

CaptaindeMac-mini:~ captain$ brew --version
Homebrew 1.7.7
Homebrew/homebrew-core (git revision 5e88c5; last commit 2018-10-23)

1.2 安装node和npm

node是Weex代码构建中的必要依赖，npm是随同Node一起安装的包管理工具，解决nodeJS代码部署的问题。

安装方式：打开终端，输入以下命令:

brew install node

检查是否安装成功

CaptaindeMac-mini:~ captain$ node -v
v10.12.0
CaptaindeMac-mini:~ captain$ npm -v
6.4.1

1.3 安装weex-toolkit开发套件

Weex 提供了一个命令行工具 weex-toolkit 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。

安装方式：打开终端，输入以下命令:

npm install -g weex-toolkit

特殊情况,如果下载失败并且提示

CaptaindeMac-mini:~ captain$ npm install -g weex-toolkit
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user

报错原因：
npm 的安装权限不足

解决办法：
在安装命令前加上 sudo，根据提示输入密码即可。

sudo npm install -g weex-toolkit

检查是否安装成功(其中会有两个选择项,需要自己选择,不要盲目的等待....)

CaptaindeMac-mini:~ captain$ weex --version
? May weex-toolkit anonymously report usage statistics to improve the tool over 
time? Yes
? Which npm registry you perfer to use? npm
16:03:56 : Set telemetry => true
16:03:56 : Set registry => http://registry.npmjs.org
Set telemetry = true
Set registry = "http://registry.npmjs.org"
16:03:56 : You can config this configuration again by using `weex config [key] [value]`
16:03:56 : Enjoying your coding time!

   v1.3.11
 - weex-builder : v0.4.0
 - weex-previewer : v1.5.1

CaptaindeMac-mini:~ captain$

weex使用

创建weex项目：weex create weexProject(项目名称) 等待创建完成

$ weex create awesome-project

执行完命令后，在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

运行结果(其中需要自己取填写一些信息,名字作者描述等选项)

? Project name weextext
? Project description text
? Author captain
? Select weex web render latest
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets)
 stage-0
? Use vue-router to manage your view router? (not recommended) Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

weex开发

之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中，已经配置好了几个常用的 npm script，分别是：

build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启HotReload服务器，代码改动的将会实时同步到网页中
我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。

或者直接

npm start

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

初始化时已经为我们创建了基本的示例，我们可以在 src/index.vue 中查看。

待续~

最后编辑于：2018.10.24 09:40:53