Question

我想创建并提供不带Angular的Ionic v4应用程序。我想在HTML和Vanilla JavaScript中使用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

并安装Ionic

npm i @ionic/core

并使用Ionic CLI初始化此现有项目

ionic init blank-app --type=custom

然后我将一些离子性补品添加到index.html

<!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的组件

使用以下方法创建应用后：

ionic start test-app空白--type = ionic1

转到your_app / www / index.html并将Ionic CDN集成到index.html中，现在您可以使用Ionic 4的组件，如果您需要或仅使用带有HTML的原始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>

现在您可以使用：

离子服务

希望这对您有帮助

如何为Ionic v4自定义项目提供服务

1 个答案: