本文主要是介绍Weex入门教程之3，使用 Vue 开发 Weex 页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
环境安装
在这里简略地介绍下，详细看官方教程
Node.js 环境
Node.js官网
通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。
npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。
安装完成后，检测是否安装成功
Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。C:\Users\aaron>node -v
v6.9.4C:\Users\aaron>npm -v
3.10.10C:\Users\aaron>weex-toolkit安装
目前， weex-toolkit 目前仅有最新的 beta 版本开始才支持初始化 Vue 项目，使用前请确认版本是否正确。
安装命令：
npm install -g weex-toolkit@beta安装结束后，可以在打印信息里，看到安装的位置
...
C:\Users\aaron\AppData\Roaming\npm
`-- weex-toolkit@1.0.1-beta.5+-- chalk@1.1.3| +-- ansi-styles@2.2.1| +-- escape-string-regexp@1.0.5| +-- has-ansi@2.0.0| | `-- ansi-regex@2.1.1| +-- strip-ansi@3.0.1| `-- supports-color@2.0.0...使用weex命令验证是否安装成功
Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。C:\Users\aaron>weexUsage: weex <foo/bar/we_file_or_dir_path> [options]
Usage: weex init [projectName]Options:--port http listening port number ,default is 8081 [default: 8081]--wsport websocket listening port number ,default is 8082 [default: 8082]--output to build the js bundle to the specify a path[default: "no JSBundle output"]Usage:weex <command>where <command> is one of:debug start weex debuggercompile compile we/vue filerun run your projectweex <command> --help help on <command>C:\Users\aaron>查看Weex版本
C:\Users\aaron>weex -vv1.0.1-beta.5- weex-devtool : v0.2.76
- weexpack : v0.3.5
C:\Users\aaron>准备工作已经完成，接下来，hello word!
初始化 Weex 项目
Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。C:\Users\aaron>f:F:\>cd F:\0Develop\workspace_weexF:\0Develop\workspace_weex>weex init weexVue --output F:\0Develop\workspace_weex\weexVue
prompt: Init your Project: (weexVue)
file: F:\0Develop\workspace_weex\weexVue\.babelrc created.
file: F:\0Develop\workspace_weex\weexVue\.eslintrc created.
file: F:\0Develop\workspace_weex\weexVue\.gitignore created.
file: F:\0Develop\workspace_weex\weexVue\app.js created.
file: F:\0Develop\workspace_weex\weexVue\assets\phantom-limb.js created.
file: F:\0Develop\workspace_weex\weexVue\assets\qrcode.js created.
file: F:\0Develop\workspace_weex\weexVue\assets\qrcode.min.js created.
file: F:\0Develop\workspace_weex\weexVue\assets\style.css created.
file: F:\0Develop\workspace_weex\weexVue\assets\url.js created.
file: F:\0Develop\workspace_weex\weexVue\build\init.js created.
file: F:\0Develop\workspace_weex\weexVue\index.html created.
file: F:\0Develop\workspace_weex\weexVue\package.json created.
file: F:\0Develop\workspace_weex\weexVue\README.md created.
file: F:\0Develop\workspace_weex\weexVue\src\foo.vue created.
file: F:\0Develop\workspace_weex\weexVue\webpack.config.js created.
file: F:\0Develop\workspace_weex\weexVue\weex.html created.F:\0Develop\workspace_weex>初始化结束后，有两个文件值得看(生成的项目功能和用法可以参考其 )。
描述项目一些配置
file: F:\0Develop\workspace_weex\weexVue\package.json created.
编译运行步骤
file: F:\0Develop\workspace_weex\weexVue\README.md created.
开发
之后我们进入项目所在路径，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 页面。
编译vue|we文件，生成js文件
如果你需要集成到已有Android项目或其它，你就需要编译vue生成js文件。
查看编译命令语法
F:\0Develop\workspace_weex\weexVue>weexUsage: weex <foo/bar/we_file_or_dir_path> [options]
Usage: weex init [projectName]Options:--port http listening port number ,default is 8081 [default: 8081]--wsport websocket listening port number ,default is 8082 [default: 8082]--output to build the js bundle to the specify a path[default: "no JSBundle output"]Usage:weex <command>where <command> is one of:debug start weex debuggercompile compile we/vue filerun run your projectweex <command> --help help on <command>F:\0Develop\workspace_weex\weexVue>weex compileUsage: weex-builder [options] <source> <dest>Options:-h, --help output usage information--ext [ext] set enabled extname for compiler default is vue|we--web set web mode for h5 renderF:\0Develop\workspace_weex\weexVue>weex-builder --ext vue F:\0Develop\workspace_weex\weexVue\src F:\0Develop\workspace_weex\weexVue\src\build
Command {commands: [],options:[ Option {flags: '--ext [ext]',required: 0,optional: -7,bool: true,long: '--ext',description: 'set enabled extname for compiler default is vue|we' },Option {flags: '--web',required: 0,optional: 0,bool: true,long: '--web',description: 'set web mode for h5 render' } ],_execs: {},_allowUnknownOption: false,_args:[ { required: true, name: 'source', variadic: false },{ required: true, name: 'dest', variadic: false } ],_name: 'weex-builder',Command: [Function: Command],Option: [Function: Option],ext: 'vue',_events: { ext: [Function], web: [Function], '*': [Function: listener] },_eventsCount: 3,rawArgs:[ 'E:\\0Develop\\nodejs\\node.exe','C:\\Users\\aaron\\AppData\\Roaming\\npm\\node_modules\\weex-builder\\bin\\weex-builder.js','--ext','vue','F:\\0Develop\\workspace_weex\\weexVue\\src','F:\\0Develop\\workspace_weex\\weexVue\\src\\build' ],args:[ 'F:\\0Develop\\workspace_weex\\weexVue\\src','F:\\0Develop\\workspace_weex\\weexVue\\src\\build',[Circular] ] }
build completed!
output:
F:\0Develop\workspace_weex\weexVue\src\build\foo.jsF:\0Develop\workspace_weex\weexVue>ok,已经编译成js文件到你指定的位置了
集成 Weex 到已有应用
你用Vue开发好页面后，你就可以编译成js文件，然后应用到Android项目了。
参考：
链接：http://pan.baidu.com/s/1eScbJzG 密码：73q5
工作原理
Weex 构建移动应用,整体结构设计
一个具有高并行研发能力、动态化和标准化规范化的移动应用应该由以下几个方面构成：
|------|------|------|------| |-----|
| page | page | page | page | | api |
|------|------|------|------| | api |
|------|------|------|------| | api |
| page | page | page | page | | api |
|------|------|------|------| | api || api |
|---------------------------| | api |
| router | | api |
|---------------------------| |-----|- 页面：首先移动应用应该可以被拆解成若干个页面，每个页面相对解耦独立，同时每个页面都有一个 URL 进行唯一标识。
- 路由：这些页面将会通过路由机制有机的串联起来，页面之间的关系是通过路由来进行调度的。常见的移动应用路由包括导航栏、tab 切换等。
- 设备能力：以各种 API 或服务的方式提供出来，供页面自由使用。
这篇关于Weex入门教程之3，使用 Vue 开发 Weex 页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
