如何使用 Visual Studio 2013 Community 创建 ionic 应用程序?

2024-05-04

有没有关于如何构建的教程Visual Studio 上的 ionic 应用程序 http://blog.ionic.io/announcing-ionic-templates-for-visual-studio/?

有谁用过吗VS 中的离子模板 https://visualstudiogallery.msdn.microsoft.com/b26474d5-c14d-4d69-bad5-37954538c506/view/Discussions?当我尝试打开此模板时,出现以下错误:

此扩展无法安装在任何当前安装的产品上。

If I 下载并安装通过VS 2013 社区 https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx模板(在新项目对话框中)创建项目后出现此错误:

找不到导入的(CordovaTools)项目

问题:我怎样才能得到那些.targetsVS找不到这里的文件?


这是因为这个模板现在只支持Visual Studio 2015 RC,但你使用的是VS 12.0,即VS2013。

[Update]

注意:以下内容将来可能会移动到博客或可以分享给其他人的地方。

环境:

工具:Visual Studio 2013 Update 4 + Apache Cordova CTP 3.1 工具

操作系统:Windows 8.1 专业版

Topic: 如何从模板开始开发 ionichttps://github.com/driftyco/ionic-starter-tabs https://github.com/driftyco/ionic-starter-tabs在 Visual Studio 2013 中

Step 1:

在 Visual Studio 2013 中创建了一个新的空白 Cordova 应用程序。

文件->新建->项目->JavaScript->Apache Cordova 应用程序->空白应用程序(名为 TestIonicTemplate)。

Step 2:

从以下位置下载模板https://github.com/driftyco/ionic-starter-tabs https://github.com/driftyco/ionic-starter-tabs打开网站http://code.ionicframework.com/# http://code.ionicframework.com/#。我们稍后会用到它。

Step 3:

假设模板文件夹是 ionic-starter-tabs-master,项目是 TestIonicTemplate。然后开始将东西合并到VS项目中。

  1. 进入Visual Studio,在下面添加一个名为templates的新文件夹 根项目文件夹。

  2. 执行以下复制粘贴操作:将所有 .js 文件从 \ionic-starter-tabs-master\js\ 到 TestIonicTemplate\scripts 全部移动 html 文件从 \ionic-starter-tabs-master\templates 到 TestIonicTemplate\模板

  3. 回到VS -> 右键点击上面提到的文件夹 -> 添加->现有项目。添加这些文件后,我们有以下内容 结构。

Step 4:

根据我们下载的模板中的index.html,对VS项目的index.html做如下修改。

  1. 添加对 ionic.css 和 ionic.bundle.js 的引用我们可以选择使用 本地副本或离子 CDN,您可以从以下位置获取所有这些http://code.ionicframework.com/# http://code.ionicframework.com/#我之前提到过。我这里使用CDN。
  2. 删除对index.js的引用并添加对我们所有.js的引用 复制的。
  3. 从 \ionic-starter-tabs-master\index.html 复制元行
  4. 在正文中添加 'ng-app="starter"' 并删除默认的 html 体内的元素。
  5. 现在从 \ionic-starter-tabs-master\index.html 复制正文内容 我们有以下index.html代码:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>TestIonicTemplate</title>

    <!-- TestIonicTemplate references -->
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet" />
    <!-- ionic/angularjs js -->
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/services.js"></script>
</body>
</html>

这是我在涟漪中看到的结果:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Visual Studio 2013 Community 创建 ionic 应用程序? 的相关文章

随机推荐