在这里简略地介绍下,详细看官方教程
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 -vv6.9.4C:/Users/aaron>npm -v3.10.10C:/Users/aaron>目前, 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 debugger compile compile we/vue file run run your projectweex <command> --help help on <command>C:/Users/aaron>查看Weex版本
C:/Users/aaron>weex -v v1.0.1-beta.5 - weex-devtool : v0.2.76 - weexpack : v0.3.5C:/Users/aaron>准备工作已经完成,接下来,hello Word!
初始化结束后,有两个文件值得看(生成的项目功能和用法可以参考其 )。 描述项目一些配置 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 Bundledev: webpack watch 模式,方便开发serve: 开启静态服务器debug: 调试模式我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。
然后我们打开浏览器,进入 http://localhost:8080/index.html 即可看到 weex h5 页面。
如果你需要集成到已有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 debugger compile compile we/vue file run run your projectweex <command> --help help on <command>F:/0Develop/workspace_weex/weexVue>weex compile Usage: 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/buildCommand { 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文件到你指定的位置了
你用Vue开发好页面后,你就可以编译成js文件,然后应用到Android项目了。 参考: 链接:http://pan.baidu.com/s/1eScbJzG 密码:73q5
一个具有高并行研发能力、动态化和标准化规范化的移动应用应该由以下几个方面构成:
|------|------|------|------| |-----|| page | page | page | page | | api ||------|------|------|------| | api ||------|------|------|------| | api || page | page | page | page | | api ||------|------|------|------| | api | | api ||---------------------------| | api || router | | api ||---------------------------| |-----|页面:首先移动应用应该可以被拆解成若干个页面,每个页面相对解耦独立,同时每个页面都有一个 URL 进行唯一标识。路由:这些页面将会通过路由机制有机的串联起来,页面之间的关系是通过路由来进行调度的。常见的移动应用路由包括导航栏、tab 切换等。设备能力:以各种 API 或服务的方式提供出来,供页面自由使用。新闻热点
疑难解答