ionic学习之建立一个ionic项目-创新互联

原文链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%AD%A6%E4%B9%A0%E4%B9%8B%E5%BB%BA%E7%AB%8B%E4%B8%80%E4%B8%AAionic%E9%A1%B9%E7%9B%AE/

专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业达川免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

1.安装ionic:$npm install -g cordova ionic

2.更改命令所在位置到你容易找到的目录:cd  directoryName

  例如:cd practice

3.终端输入命令新建一个工程:$ ionic start myApp blank(生成名字为myApp的空项目)

                   或$ ionic start myApptabs(生成名字为myApp的带有选项卡的项目)

                    或$ ionic start myApp sidemenu(生成名字为myApp的带有侧边菜单的项目)

   这里根据自己的项目需要,选择任意一个命令即可快速建立一个ionic framework项目。

4.在webstrom上的terminal终端中执行:

         $ionic platform add iOS

          $ionic platform add android

5.运行项目:如果想在电脑浏览器上看效果,可以执行:ionic serve

         如果电脑已经安装了iOS或androidmo'ni模拟器可以执行以下命令看手机上的效果:

         在iOS上建立并测试该项目:

             $ionic build iOS

             $ionic emulate iOS即可在电脑上模拟iOS手机运行这个app,

         这两个命令也可以用ionic run iOS代替,效果一样。

         在android上建立并测试该项目:

             $ionic build android

             $ionic emulate android

          或者同样用一句ionic run android代替上面两行命令。

   执行以上命令后就可以在浏览器或模拟器上看到app的效果了~

6.ionic框架会自动生成以下文件:

ionic学习之建立一个ionic项目

可以看到下边包含了很多文件:

  ionic项目自动生成的文件:

  hooks:自定义的cordova的脚本命令来执行一些特别指令

   platfroms:包含添加的ios和android平台

   plugins:项目所用到的插件

   scss:scss代码,发布时会输出到你的www/css/

   www:最主要的文件,是我们所建立的应用,包括css,p_w_picpath,js,lib,templates,index.html

   bower.json:bower配置文件

  config.xml:Ionic的配置文件,可以配置app的id,名称、描述起始页等

  gulpfile.js:gulp构建工具的执行文件

  ionic.project:Ionic的项目文件

  package.json :npm配置文件

 其余为webstrom中自己生成的文件:

  bowerrrc:bower配置文件

  gitignore:git配置文件

  editorconfig:统一代码的工具

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:ionic学习之建立一个ionic项目-创新互联
URL标题:http://scyanting.com/article/dipdgd.html