Weex 环境搭建

介绍

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。

关键词

node.js：一个基于 chrome v8 引擎构建的一个 javascript 的运行时环境（runtime），类似 java 运行在 Windows 上运行时环境。
npm：npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具，类似 Linux 的 apt-get。
webpack: 一个现代 JavaScript 应用程序的静态模块打包器( module bundler )，类似 Android 开发上面的 gradle 。
weex-toolkit：脚手架工具来辅助开发和调试，通过 npm 来安装。
vue: 一个构建数据驱动的 web 界面的渐进式框架，类似 Android 语言开发。
weex：通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。
Babel:一个 JavaScript 编译器 。

安装weex步骤

1、node.js 安装
安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。

  $ node -v           //验证 node.js 安装完成
  v11.14.0

2、npm 安装
通常安装了 Node.js 环境，npm 包管理工具也随之安装了。

$ npm -v                //验证 npm 安装完成
 6.7.0

3、weex-toolkit 安装
通过 npm 安装 weex的脚手架工具。

$ npm install -g weex-toolkit           //执行安装weex脚手架
$ weex -v                                 //验证 weex-tookit 安装完成
2.0.0-beta.20 (Core 2.0.0-beta.18)

weex 项目创建

1、项目创建

$ weex create weex-app      ·//创建一个weex 项目

2、依赖下载, 启动项目

 $ cd weex-app   //进入项目目录
 $ npm install     //通过apm安装项目依赖
 $ npm start       //启动一个本地的 web 服务，监听 8081 端口

3、项目访问
你可以打开 http://ip:8081 查看页面在 Web 下的渲染效果。

Your application is running here: http://ip:8081.
这样你的第一个weex 项目工程创建完成，且启动了一个web的本地服务

屏幕快照 2019-04-19 下午3.32.07.png

Weex工程结构

weex web结构：

├── android.config.json
├── configs      // 工程编译 打包的配置和脚本目录
├── ios.config.json
├── node_modules  // 依赖库目录
├── package.json //  依赖库，脚本命令及版本的配置文件
├── package-lock.json
├── platforms  //  移动端模板工程目录
├── plugins       
├── README.md
├── src     // vue 页面的开发目录
├── test
├── web
└── webpack.config.js //  webpack js 打包脚本，配置来之 configs配置脚本

移动端模板工程添加：

weex platform android  // 生成 weex android 模板工程
weex platform  ios    //  生成 weex ios 模板工程