【问题标题】:How to create ionic apps using visual studio 2013 Community?如何使用 Visual Studio 2013 社区创建离子应用程序?
【发布时间】:2015-06-18 21:16:22
【问题描述】:

是否有关于如何构建ionic apps on visual studio 的教程?

有人用过ionic templates in VS吗?当我尝试打开此模板时,我收到此错误:

此扩展程序不可安装在任何当前安装的产品上。

如果我通过VS 2013 Community 模板下载并安装(在新项目对话框中)我在创建项目后收到此错误:

未找到导入的 (CordovaTools) 项目

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

【问题讨论】:

    标签: visual-studio templates ionic-framework visual-studio-cordova


    【解决方案1】:

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

    [更新]

    注意:以下内容可能会被移动到博客中,或者将来可以分享给其他人。

    环境

    工具:Visual Studio 2013 Update 4 + 适用于 Apache Cordova CTP 3.1 的工具

    操作系统:Windows 8.1 专业版

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

    第 1 步:

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

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

    第 2 步:

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

    第 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->右键上面提到的文件夹-> 添加->现有项目。添加这些文件后,我们有以下内容 结构。

    第 4 步:

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

    1. 添加对ionic.css和ionic.bundle.js的引用我们可以选择使用 本地副本或离子 CDN,您可以从 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>

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

    【讨论】:

    • 我正在使用 VS 2013 社区。不支持Cordova吗?
    • VS 2013 确实支持科尔多瓦。但是你提到的模板不支持VS 2013。让我给你一些关于如何创建离子cordova应用程序的步骤。我现在手头没有开发环境。
    • 你明白我的意思!我不关心模板。我需要使用 VS 来构建离子应用程序。非常感谢!
    【解决方案2】:

    我不太明白你的问题,但你可以使用 Visual Studio Code (VSC) 来开发 Ionic 应用程序和其他 Web 相关项目,它已经带有 Angular 插件。

    如果您的意思是如果 VS 可以创建 Ionic 项目,我认为这是不可能的。通过 CMD/终端创建它

    • npm install -g cordova ionic
    • ionic 启动 myApp 选项卡
    • cd myApp
    • 离子平台添加 ios(或 android)
    • ionic 构建 ios(或 android)
    • ionic 模拟 ios(或 android)

    然后通过您喜欢的 IDE 或文本编辑器打开它以开始开发。

    【讨论】:

    • 是的,我了解@JosephOcasio。这就是我通过guide 所做的。我很想看到这个模板能正常工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-08-04
    • 2013-12-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-20
    相关资源
    最近更新 更多