入门

共同主题

UI组件

本国的

搜索文件 /
betway东盟体育app离子正在招聘 跟我们工作 <！ - t.4.265.7.0 - >向前箭头

您的第一个IONIC应betway东盟体育app用程序：VUE

内容

关于离子的伟大事物是使用一个代码库，您可以使betway东盟体育app用HTML，CSS和JavaScript为任何平台构建。随着我们通过创建现实应用程序一步一步地学习离子应用程序开发的基本面。betway东盟体育app

以下是所有3个平台上运行的已完成应用程序：

我们将建立什么

我们将创建一个照片库应用程序，提供使用设备的相机拍摄照片的能力，将它们显示在网格中，并将它们永久存储在设备上。

亮点包括：

  • 使用IONIC框架在Web，iOS和Android上运行的一个基于VUE的代码库betway东盟体育app UI组件 。
  • 部署为使用本机IOS和Android移动应用程序使用 电容器 ，离betway东盟体育app子的官方本机应用程序运行时。
  • 照片库功能由电容器提供动力 相机 那 文件系统 ， 和 贮存 蜜蜂。

查找本指南中引用的完整应用程序代码 在github上 。

下载所需的工具

立即下载并安装这些以确保最佳的离子开发经验：betway东盟体育app

  • node.js. 与离子生态系统相互作用。betway东盟体育app 下载LTS版本 。
  • 代码编辑器 for ...写作代码！我们是粉丝 Visual Studio Code. 。
  • 命令行界面/终端（CLI） ：
    • 视窗 用户：为最好的离子体验，我们推荐内置命令betway东盟体育app行（CMD）或PowerShell CLI，以管理员模式运行。
    • Mac / Linux. 用户，几乎任何终端都将起作用。

安装离子工具betway东盟体育app

在命令行终端中运行以下操作以安装IONIC CLI（betway东盟体育app betway东盟体育app ）， 原始运行 ，用于在设备和模拟器/模拟器上运行本机二进制文件，以及 Cordova-Res. ，用于生成本机应用程序图标和Splash屏幕：

要在Visual Studio代码中打开终端，请转到终端 - >新终端。


              $
              NPM.
             
              安装
             -g @betway东盟体育app ionic / cli @最新的本土运行cordova-res

这 -G 选项含义 全球安装 。全局安装包时， EACCES. 可能发生权限错误。

考虑在没有提升的权限的情况下设置设置NPM以在全局中运行。看 解决许可错误 想要查询更多的信息。

创建一个应用程序

接下来，创建使用“选项卡”启动模betway东盟体育app板的离子Vue应用程序，并为本机功能添加电容：


              $
             betway东盟体育app离子启动照片库标签 -  vue --capacitor

这项初学项目配备了三个预先构建的页面和离子发展的最佳实践。betway东盟体育app通过已经到位的共同构建块，我们可以轻松添加更多功能！

接下来，更改为App文件夹：


              $
              光盘
             照片库

接下来，我们需要安装必要的电容插件以使应用程序的本机功能工作：


              NPM.
             
              安装
             @电容/摄像机@电容/存储@电容/文件系统

PWA元素

一些电容器插件包括相机API，通过离子提供基于Web的功能和UIbetway东盟体育app PWA元素库 。

这是一个单独的依赖性，所以下一步安装它：


              $
              NPM.
             
              安装
             @betway东盟体育app离子/ PWA元素

安装后，请在您的代码编辑器中打开项目。

接下来，进口 @betway东盟体育app离子/ PWA元素 通过编辑 SRC / MAIN.TS. 。


              // createApp（）行上方
             
              进口
             
              {
             定义
              }
             
              从
             
              '@betway东盟体育app ionic / pwa-comments / loader'
              ;
             
              //在平台引导后调用元素加载器
             
              定义
              （
             窗户
              的）
              ;
复制 复制

而已！现在，为了有趣的部分 - 让我们看看应用程序。

运行应用程序

在shell中运行此命令：


              $
             betway东盟体育app离子服务

和voilà！您的IONbetway东盟体育appIC应用程序现在在Web浏览器中运行。您的大多数应用程序都可以在浏览器中进行建立和测试，大大提高开发和测试速度。

照片库！！！

有三个标签。单击Tab2选项卡。这是一个空白的帆布，又是转换为照片库的完美位置。离子CLbetway东盟体育appI具有实时重新加载，因此当您进行更改并保存时，该应用程序立即更新！

经过本教程之前和之后“c-id=

打开 /src/views/tab2.vue. 。我们看：


                <
               模板
               >
             
                <
               离子页面
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
               >
             
                <
               离子标题
               >
             标签2
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
              
               ：全屏
                =
                “
               真的
                “
               >
             
                <
               离子标题
              
               坍塌
                =
                “
               凝结
                “
               >
             
                <
               离子工具栏
               >
             
                <
               离子标题
              
               尺寸
                =
                “
               大
                “
               >
             标签2
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               Explorecontainer.
              
               名称
                =
                “
               标签2页
                “
              
               />
             
                
               离子内容
               >
             
                
               离子页面
               >
             
                
               模板
               >
复制 复制

离子标题 表示顶部导航和工具栏，“标签2”为标题。让我们重命名：


                <
               离子标题
               >
             照片库
                
               离子标题
               >
复制 复制

我们将我们的应用程序的视觉方面放入 <离子内容> 。在这种情况下，我们将添加打开设备相机的按钮，并显示相机捕获的图像。但首先，删除 Explorecontainer. 组件，从Import语句开始：


              进口
             Explorecontainer.
              从
             
              '@ / components / exploreconter.vue'
              ;
复制 复制

接下来，删除组件名称（ Explorecontainer. ） 来自 组件 列出默认导出和HTML：


                <
               Explorecontainer.
              
               名称
                =
                “
               标签2页
                “
              
               />
复制 复制

我们将用一个替换它 浮动动作按钮 （Fab）。首先，更新中的导入