EEUI.APP

创建项目

执行此节之前，请确保必须的环境全都安装完成。

生成开发模板

使用 eeui-cli 的 create 命令来创建模版工程：（projectName为你要创建的项目名称）

eeui create projectName

脚手架会自动从 github 上拉取最新的 eeui-template 开发模板 (opens new window)

TIP

如遇到网络原因自动下载失败，请直接从github下载最新releases https://github.com/kuaifan/eeui-template (opens new window)
下载完解压缩到本地，终端cd进入解压得到的文件夹；然后执行eeui setting就可以按提示设置App名称、版本等App信息，执行eeui setdemo就可以设置初始化演示模板。

然后进入开发目录，执行 npm install 加载 node_modules Node.js基础模块

cd projectName
npm install
npm run dev

iOS 运行项目

确保您已经安装完成 iOS 所需环境。

cd到iOS工程目录platforms/ios/eeuiApp 执行pod install命令来拉取iOS工程的依赖

pod install

首次执行时间会稍长，命令执行完毕后找到当前目录下 eeuiApp.xcworkspace 文件，双击即可唤起XCode打开 iOS 工程；

然后在XCode选择相应的模拟器（比如iPhone xs），点击▶按钮来运行项目。

Android 运行项目

确保您已经安装完成 Android 所需环境。

1.打开AndroidStudio软件然后OpenAndroid工程目录platforms/android/eeuiApp。 2.待项目构建完成，点击 AndroidStudio 上方工具栏的 Run，即可运行项目。

第一次打开 AndroidStuido 时，由于本地环境未配置好，AndroidStuido 会提示错误，按照 IDE 提示，点击 sync 同步一下，大部分环境问题都可以解决。

注：

模板目录结构

项目根目录
    ├── common                  // 公共文件
    │   ├── backup              // ├── 备份目录
    │   └── dist                // ├── 静态资源生成目录
    ├── node_modules            // node依赖
    ├── platforms               // 平台源码
    │   ├── android             // ├── 安卓平台源码
    │   └── ios                 // └── iOS平台源码
    ├── plugins                 // 平台插件程序
    ├── src                     // 开发路径
    │   ├── appboard            // ├── appboard
    │   ├── components          // ├── 封装的组件
    │   └── pages               // └── 开发页面  
    ├── eeui.config.js          // 客户端相关配置
    └── package.json            // npm项目及依赖说明

首次打开我们已经为您内置了由一些 demo，您可以看到相关的页面，下面在开发之前还需要进行一些相关的配置和调试的学习。

新建一个简单页面

新建页面

直接新建一个vue文件，如图所示:

不需要配置任何路由，路由自动生成的，你只需要再次 npm run dev 或者 npm run build

跳转页面

//示例①
const eeui = app.requireModule('eeui');
eeui.openPage({
    url: 'mine.js',
}, function(result) {
    //......
});

//示例②
const eeui = app.requireModule('eeui');
eeui.openPage({
    pageName: 'pageName_1',
    pageType: 'app',
    url: 'mine.js'
}, function(result) {
    //......
});

//示例③
const navigator = app.requireModule('navigator');
navigator.push({
    url: 'mine.js'
}, function(result) {
    //......
});

详情可查看 怎么创建一个页面并做跳转 (opens new window)

第三方UI组件库

  • 推荐以下组件库，基于weex的组件库，包含了大量的界面组件以及交互组件，帮助开发者APP快速成型
  • 都可以用于eeui，安装使用方法见各个UI库的文档

【weex 官方组件库】https://github.com/alibaba/weex-ui (opens new window)

【amui 组件丰富】https://hminghe.github.io/weex-amui/#/?id=weex-amui (opens new window)

【bui 还不错】http://dev.bingocc.com/buiweex/docs/ (opens new window)

← 配置相关 →