创建项目

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

生成开发模板

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

  1. eeui create projectName

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

::: tip

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

:::

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

  1. cd projectName
  2. npm install
  3. npm run dev

iOS 运行项目

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

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

  1. pod install

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

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

Android 运行项目

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

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

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

注：

模板目录结构

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

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

新建一个简单页面

新建页面

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

创建项目 - 图1

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

跳转页面

  1. //示例①
  2. const eeui = app.requireModule('eeui');
  3. eeui.openPage({
  4.     url: 'mine.js',
  5. }, function(result) {
  6.     //......
  7. });
  9. //示例②
  10. const eeui = app.requireModule('eeui');
  11. eeui.openPage({
  12.     pageName: 'pageName_1',
  13.     pageType: 'app',
  14.     url: 'mine.js'
  15. }, function(result) {
  16.     //......
  17. });
  19. //示例③
  20. const navigator = app.requireModule('navigator');
  21. navigator.push({
  22.     url: 'mine.js'
  23. }, function(result) {
  24.     //......
  25. });

详情可查看 怎么创建一个页面并做跳转

第三方UI组件库

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

【weex 官方组件库】https://github.com/alibaba/weex-ui

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

【bui 还不错】http://dev.bingocc.com/buiweex/docs/