You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Ionic Framework是否已移除无框架启动项目的选项?

解决Ionic无框架项目创建问题

如果你想创建不依赖Angular、React或Vue的Ionic项目,有两种可靠的方案:

方案一:创建基于Stencil的独立项目

Stencil是Ionic的底层构建工具,本身就是无框架依赖的Web组件方案,官方完全支持。执行以下命令即可创建:

ionic start MyApp blank --type=stencil

这个项目会生成纯Web组件结构,你可以用原生JavaScript/TypeScript编写代码,所有Ionic组件都能直接使用,不需要额外绑定前端框架。

方案二:手动搭建纯静态无框架项目

如果想要更轻量化的纯静态项目,可以手动初始化:

  • 创建空文件夹并进入:
mkdir MyApp && cd MyApp
  • 初始化npm项目:
npm init -y
  • 安装Ionic核心依赖:
npm install @ionic/core
  • 创建index.html文件,引入Ionic的样式和脚本:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Ionic App</title>
  <link rel="stylesheet" href="node_modules/@ionic/core/css/ionic.bundle.css">
  <script type="module" src="node_modules/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="node_modules/@ionic/core/dist/ionic/ionic.js"></script>
</head>
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>无框架Ionic应用</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button expand="block">点击测试</ion-button>
    </ion-content>
  </ion-app>
</body>
</html>
  • 用静态服务器启动项目,比如使用serve:
npx serve

需要注意的是,当前Ionic CLI默认的blank模板确实强制绑定三大框架,但上述两种方案都是官方认可的无框架使用方式,完全兼容Ionic的组件生态。

内容的提问来源于stack exchange,提问作者medk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 03:12:17