【发布时间】：2019-08-10 19:50:52
【问题描述】：
我想在没有 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
并安装 Ionic
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
感谢您的帮助。
【问题讨论】：
-
你找到解决办法了吗？
标签： javascript ionic-framework ionic4