Weex入门教程之3，使用 Vue 开发 Weex 页面

环境安装在这里简略地介绍下，详细看官方教程Node.js 环境Node.js官网通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。安装完成后，检测是

陈科肇

8079人浏览 · 2017-02-10 14:29:40

陈科肇 · 2017-02-10 14:29:40 发布

环境安装

在这里简略地介绍下，详细看官方教程

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.4

C:\Users\aaron>npm -v
3.10.10

C:\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>weex

Usage: 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 project

weex  <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.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_weex

F:\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>weex

Usage: 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 project

weex  <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 render

F:\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.js

F:\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 或服务的方式提供出来，供页面自由使用。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^