如何為 Ionic v4 自定義項目提供服務

Question

我想創建和提供一個沒有 Angular 的 Ionic v4 應用程序。 我想在帶有 Vanilla JavaScript 的 HTML 中使用 Ionic v4 UI 組件。

我的第一個計划：

我嘗試使用 Ionic CLI 4.12.0。 當我做

ionic start --list

然后我得到

name     | project type  | description
--------------------------------------------------------------------------------------------------------------------------------
blank    | angular       | A blank starter project
sidemenu | angular       | A starting project with a side menu with navigation in the content area
tabs     | angular       | A starting project with a simple tabbed interface
tabs     | ionic-angular | A starting project with a simple tabbed interface
blank    | ionic-angular | A blank starter project
sidemenu | ionic-angular | A starting project with a side menu with navigation in the content area
super    | ionic-angular | A starting project complete with pre-built pages, providers and best practices for Ionic development.
tutorial | ionic-angular | A tutorial based project that goes along with the Ionic documentation
aws      | ionic-angular | AWS Mobile Hub Starter
tabs     | ionic1        | A starting project for Ionic using a simple tabbed interface
blank    | ionic1        | A blank starter project for Ionic
sidemenu | ionic1        | A starting project for Ionic using a side menu with navigation in the content area
maps     | ionic1        | An Ionic starter project using Google Maps and a side menu

即使沒有提供，我還是嘗試使用以下方法創建自定義項目：

ionic start blank-app blank --type=custom

然后我收到一個錯誤：

[ERROR] custom is not a valid project type.

Ionic CLI 似乎沒有辦法。

我的第二個計划：

我初始化一個新的節點項目

npm init

並安裝離子

npm i @ionic/core

並使用 Ionic CLI 初始化此現有項目

ionic init blank-app --type=custom

然后我在 index.html 中添加了一些 Ionic 組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src='node_modules/@ionic/core/dist/ionic.js'></script>
    <link rel="stylesheet" href="node_modules/@ionic/core/css/core.css">
    <title>my-app</title>
</head>
<body>
    <ion-app>
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>header-title</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-grid>
                <ion-row>
                    <ion-col>
                        <ion-button id="btn-add">
                            <ion-icon name="add"></ion-icon>Add
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-content>
    </ion-app>
    <script src="src/app.js"></script>
</body>
</html>

在 src/app.js 中，我可以實現業務邏輯。

const addBtn = document.querySelector('#btn-add');
addBtn.addEventListener('click', () => {
   alert('click add button');
});

這一切都很好。

現在我可以安裝像 serve 這樣的包

npm install serve --save-dev

出於開發目的和 package.json 中的腳本，我可以用

npm start

是的，那是有效的。

但這是我的問題。 為了使用 Ionic CLI 為我的項目提供服務，我必須做什么？

ionic serve -c

感謝您的任何幫助。

Answer 1

我認為目前您可以僅將自定義項目與 Ionic1 一起使用。

但是如果你想使用 Ionic 4 的組件

使用以下方法創建應用程序后：

離子啟動測試應用程序空白 --type=ionic1

轉到 your_app/www/index.html 並將 Ionic CDN 集成到您的 index.html 中，現在如果您願意，您可以使用 Ionic 4 的組件或僅使用帶有 HTML 的 vanilla javascript。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card</title>
  <!-- Import the Ionic CSS -->
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
<!-- Import Ionic -->
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<!-- Optional, import the Ionic icons -->
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
</head>
<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Card</ion-title>
      </ion-toolbar>
    </ion-header>,
    <ion-content fullscreen>
      <ion-card>
        <img src="https://ionicframework.com/docs/demos/api/card/madison.jpg" />
        <div id="test"></div>
        <ion-card-header>
          <ion-card-subtitle>Destination</ion-card-subtitle>
          <ion-card-title>Madison, WI</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
  <script type="text/javascript">
    //Your Javascript
    document.querySelector('#test').innerHTML = "<h2>Hello World</h2>"
  </script>
</body>
</html>

現在您可以使用以下方法為您的 javascript 應用程序提供服務：

離子服務

我希望這能幫到您

如何為 Ionic v4 自定義項目提供服務

問題描述

1 個解決方案

解決方案1
0 2019-12-10 12:28:37

如何為 Ionic v4 自定義項目提供服務

問題描述

1 個解決方案

解決方案1 0 2019-12-10 12:28:37

解決方案1
0 2019-12-10 12:28:37