https://github.com/icepy/weex-generator-package

A Weex and Vue.js project，你可以参考它来完善你的Weex应用架构或者直接使用它。

项目介绍

这个项目为钉钉开发者准备了从构建，调试，到打包一系列的流程以及编写weex应用的最佳实践，我们使用Webpack来打包源代码，Babel帮助我们处理ES6的转译。

注意 ?? 此刻，我们移除掉了很多不是必须的项目，比如flow静态类型检查，jasmine单元测试等。

关于转场，你可以选择使用vue-router的方式，也可以使用钉钉的js-api openLink来跳转页面。如果你使用钉钉的js-api，那么你的应用更像一个传统的Native App转场，比如iOS的NavigationController的push，pop等有animation效果转场。

你可以在 weex-generator-package 访问并下载使用它。

目录结构

1. components 可以共享的组件放在这里

2. container 如果你使用了vue-router，那么需要使用这里的共用容器

3. lib 可以共享的函数.js文件放在这里

4. pages 真正的页面放在这里

5. platforms 平台相关的入口放在这里

Build Setup

# install dependenciesnpm install# 启动 mock 服务器npm run mock# 启动 vue web dev 环境，自启服务器 at localhost:8080npm run dev:web# build vue web release 环境npm run build:web# 启动 weex dev 环境，自启服务器 at localhost:8089npm run dev:weex# 启动 weex release 环境npm run build:weex# 编译weex和Web环境下所需要的资源，这是可以正式部署的静态资源npm run build

Mock

本项目用koa写了一个简单的mock server，它非常的灵活可复制，你可以找到 mock 目录，在router.js中书写你想要mock的数据，比如GET：

router.get('/weex/get', function *(next) { this.body = {

如果你想写一个POST请求也很容易：

router.post('/weex/post', function *(next) { this.body = {

构建脚本学习资源

• babel

• webpack

如何创建一个传统bundle.js式页面

我们可以先看一个很传统的方式来创建一个新页面，一个页面就是一个bundle.js，你应该在Webpack配置中去处理这些bundle.js。

当你选择创建一个新的页面时，需要经过下列几个步骤：

1. 在platforms/weex目录下创建你的入口文件（icepy-entry.js）

import Home from '../../pages/icepy/index.vue';Home.el = '#app';new Vue(Home);

1. 在pages/目录下创建一个icepy目录并且创建一个index.vue文件，你可以写一个很简单的Hello Your Name

<template>

1. 在build目录下的webpack.weex.conf.js文件中的entry里填上一个新的入口

// webpack 配置entry:{ 'weex-icepy-bundle': './src/platforms/weex/icepy-entry.js'}

最后，在你的终端里输入 npm run dev:weex，感受一下吧。

如何创建一个带vue-router的页面

有时候类似一个UIViewController式的bundle.js并不是你想要的，很多事情不是很好处理，那么你可以选择vue-router来处理转场，为什么它可以运行weex环境帮你处理转场？因为vue-router本意上是可以运行在任意的JavaScript环境中，你可以设置mode为abstract，而且weex是需要上层框架的render来进行计算渲染Native页面的，这也意味着当我们的路由进行转换时，vue-router会去处理一个Vue Component，而这个Vue Component 正是你需要渲染的页面。

在pages目录下创建一个组件（页面），比如dingtalk/index.vue：

<template>

访问router.js，参考 https://router.vuejs.org/zh-cn/essentials/getting-started.html 来配置路由。

import VueRouter from 'vue-router';import Home from '../pages/home/index.vue';import Dingtalk from '../pages/dingtalk/index.vue';const routes = [