weex 与 weexpack 环境搭建

标签：uid   margin   android   and   手动安装   art   使用   市场   dock   

weex 与 weexpack

weex init 会生成一个 weex 项目， 里面有weex, vue 模板。如果要开发 Android，需要建一个 Android 项目。

weexpack, 可以帮助搭建 Android 和 iOS 项目

---------------------- weex ------------------------------------------------------------

一、安装依赖

1. 安装Nodejs, 可以使用nvm 或 n 等版本管理工具来搭建不同版本的Nodejs, 或直接使用 Homebrew 安装

 1 $ brew install nvm 
 3 $ nvm install v8.5.0
 5 $ node -v
 7 $ npm -v
 9 $ npm install -g weex-toolkit

2. 安装 weex-toolkit

1 $ yarn global add weex-toolkit
2 $ weex -v

也可以使用 weex 验证是否安装成功

1 $ weex

二、初始化

1 $ weex init project-name

创建了一个使用 Weex 和 Vue 的模板项目。

包含如下目录

README.md config  public
build  package.json src

三、开发

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

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

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

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

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

---------------------- weexpack ------------------------------------------------------------

一、安装

1. 确保Nodejs 版本大于6.0

1 $ node -v
2 $ npm -v

2. 可以通过 weex create 命令提示安装，也可以手动安装

1 $ yarn global add weexpack

3. 生成 weexpack 项目

1 $ weex create project-name
2 // 或
3 $ weexpack create project-name


// 生成如下目录

README.md        package.json        start.bat
android.config.json    platforms        tools
config.xml        plugins            web
hooks            src            webpack.config.js
ios.config.json        start            webpack.dev.js

• 注意， 项目里没有 android 和 ios 模板， 需要手动添加插件

4. 安装项目的依赖

1 $ yarn install
2 // 或
3 $yarn 

5. 安装应用模板， 生成 Android 和 iOS 工程

1 $ weexpack platform add/remove android
2 $ weexpack platform add/remove ios
3 // 或
4 $ weex platform add/remove android
5 $ weex platform add/remove ios

执行成功后在 platforms 目录生成 android, ios 目录

安装指定版本，weexpack android 版本从6.0.0开始

1 $ weexpack platform add android@6.2.1
2 // 或
3 $ weex platform add android@6.2.1

6. 打包 apk

• android

1 $ weexpack run android
2 // 或
3 $ weex run android

1 $ weexpack run ios
2 // 或
3 $weex run ios

1 $ weexpack build ios
2 // 或
3 $ weex build ios

1 $ weexpack build web
2 // 或
3 $ weex build web

1 $ weexpack run web
2 // 或
3 $ weex run web

1 $ weexpack platform list

1 $ weexpack platform run

1 $ weexpack plugin add/remove

1 $ weexpack plugin login/logout

1 $ weexpack plugin create

1 $ weexpack plugin sync

weex 与 weexpack 环境搭建

标签：uid   margin   android   and   手动安装   art   使用   市场   dock   

原文地址：http://www.cnblogs.com/flying--pig/p/7519591.html