如何使用Visual Studio 2013社区创建离子应用程序? [英] How to create ionic apps using visual studio 2013 Community?
问题描述
是否有关于如何在视觉上构建离子应用程序的教程工作室?
Is there a tutorial on how to build ionic apps on visual studio?
有人使用过 VS中的离子模板?当我尝试打开此模板时，出现此错误:
Have anyone used ionic templates in VS? When I try to open this template, I'm getting this error:
此扩展程序不能安装在任何当前已安装的产品上.
This extension is not installable on any of the currently installed products.
If I download and install through VS 2013 Community templates (in new project dialogue) I get this error after creating the project:
找不到导入的(CordovaTools)项目
The imported (CordovaTools) project was not found
问题::如何在此获取VS无法找到的 .targets 文件?
Question: How can I get those .targets files here which could not be found by VS?
推荐答案
这是因为此模板现在仅支持Visual Studio 2015 RC，但是您使用的是VS 12.0，即VS2013.
It's because this template only support Visual Studio 2015 RC now but you are using VS 12.0 which is VS2013.
[更新]
注意:以下内容可能会移至博客，或者将来可以与其他人共享.
Note: The following content may be moved to a blog or somewhere can be shared to others in the future.
环境:
工具:Visual Studio 2013 Update 4 +适用于Apache Cordova CTP 3.1的工具
Tools: Visual Studio 2013 Update 4 + Tools for Apache Cordova CTP 3.1
操作系统:Windows 8.1专业版
OS: Windows 8.1 pro
主题:如何从
第1步:
在Visual Studio 2013中创建了一个新的空白Cordova应用.
Created a new blank Cordova App in Visual Studio 2013.
文件->新建->项目-> JavaScript-> Apache Cordova应用->空白应用(名为TestIonicTemplate).
File->New->Project->JavaScript->Apache Cordova Apps -> Blank App (named TestIonicTemplate).
第2步:
从 https://github.com/driftyco/ionic-starter-tabs下载模板 打开网站 http://code.ionicframework.com/# .我们将在以后使用.
Download the template from https://github.com/driftyco/ionic-starter-tabs Open the site http://code.ionicframework.com/# . We will use it later.
第3步:
假设模板文件夹为ionic-starter-tabs-master，项目为TestIonicTemplate.然后开始将内容合并到VS项目中.
Let’s say the template folder is ionic-starter-tabs-master, and the project is TestIonicTemplate. Then start to merge things to the VS project.
-
转到visual studio，在以下位置添加一个名为template的新文件夹. 根项目文件夹.
Go to visual studio, add a new folder named templates under the root project folder.
执行以下复制粘贴:将所有.js文件从 \ ionic-starter-tabs-master \ js \到TestIonicTemplate \ scripts移动所有 html文件从\ ionic-starter-tabs-master \ templates到 TestIonicTemplate \ templates
Do the following copy-past: Move all .js files from \ionic-starter-tabs-master\js\ to TestIonicTemplate\scripts Move all html files from \ionic-starter-tabs-master\templates to TestIonicTemplate\templates
返回VS->右键单击上述文件夹-> 添加->现有项目.添加这些文件后，我们有以下内容 结构.
Go back to VS -> right click on the folders mentioned above -> add->existing items. After add these files, we have the following structure.
第4步:
根据我们下载的模板中的index.html对VS项目的index.html进行以下修改.
Do the following modification to the index.html of VS project based on the index.html in the template we downloaded.
- 添加对ionic.css和ionic.bundle.js的引用我们可以选择使用 本地副本或离子CDN，您可以从 我之前提到的 http://code.ionicframework.com/# .我在这里使用CDN.
- 删除对index.js的引用，并添加对我们所有.js的引用 复制.
- 从\ ionic-starter-tabs-master \ index.html复制元行
- 在正文中添加'ng-app ="starter"'并删除默认的html 体内的元素.
- 立即从\ ionic-starter-tabs-master \ index.html复制正文内容 我们有以下index.html代码:
- Add reference to ionic.css and ionic.bundle.js We can choose using local copy or ionic CDN, you can get all of these from http://code.ionicframework.com/# I mentioned before. I use CDN here.
- Remove the reference to index.js and add reference to all .js we copied.
- Copy the meta line from \ionic-starter-tabs-master\index.html
- add 'ng-app="starter"' in the body and remove the default html element in body.
- Copy the body content from \ionic-starter-tabs-master\index.html Now we have the following index.html code:
<!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>
这是我看到的结果:
这篇关于如何使用Visual Studio 2013社区创建离子应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
