首页 > 分享发现 > 使用 ionic3 和 angular 制作移动端应用,初始化

使用 ionic3 和 angular 制作移动端应用,初始化

前提:所有的操作环境都是在 Windows 10 环境下进行的 。

 

安装 nodejs

去 nodejs 的官网(https://nodejs.org/en/)直接找对应 Windows 环境的安装包(exe)下载即可。下载下来后双击运行 exe 进行安装,一路 next 即可。安装完之后打开命令行工具,在其中输入 node -v ,出现版本号就说明 nodejs 的环境在本机已经成功安装。

安装 ionic(含 cordova)

首先说下 ionic 官网地址:http://ionicframework.com/。安装 ionic 涉及的命令如下


$ npm install -g cordova ionic #安装 ionic 和 cordova,-g参数表示全局安装

$ ionic -version #安装后通过这行验证是否安装成功

3.12.0

$ cordova -v
7.1.0

上面的命令中有个 npm,这是 nodejs 的包管理工具,在今后开发过程中,如果要用到什么 js 的依赖包都会使用这个 npm 命令下载下来。

由于 npm 默认走的是 https://registry.npmjs.org/ ,国内访问速度比较慢,因此一般会把 npm 的源地址改到国内的淘宝镜像。详细内容参见站内相关日志,npm 一些操作说明

 

创建 ionic 项目文件夹

ionic 安装完成之后,在需要的地方新建一个文件夹,例如在 D  盘新建一个 ionicStart 文件夹。在 ionicStart 文件夹内按住 shift 键同时右击,选择右键菜单中的“在此处打开命令行窗口”,在当前目录下运行命令行工具,在弹出的命令行中输入如下命令


$ ionic start testapp blank
#其中 testapp 是创建的项目文件夹名称,tabs 表示使用 ionic 预设的 blank 模板创建这个项目。
#可以使用 --list(或 -l ) 参数来查看可用的模板

用以上命令就可以按照 ionic 的 blank 模板初始化一个名为 testapp 的项目文件夹啦。

 

初始化过程中会安装 npm 的依赖,由于上面说到的原因,依赖安装过程会比较慢,因此我们可以在初始化过程中添加如下参数,使得初始化过程中暂时先不安装依赖。


$ ionic start testapp blank --cordova --no-deps --no-git --no-link

#--cordova 表示在初始化过程中集成 cordova

#--no-deps 表示不安装 npm/yarn 依赖

#--no-git 表示不初始化 git 仓库

#--no-link 表示不链接到 Ionic 平台

 

在这种情况下,进入创建的 testapp 文件夹,然后运行如下命令


#单独安装依赖,这样做的好处是你可以把依赖的源临时指定到淘宝镜像来加快安装过程。

$ npm install --registry=https://registry.npm.taobao.org

 

运行 ionic 项目

经过如上几部操作之后,在 testapp 文件夹内运行如下命令就可以预览刚刚创建的项目啦。


$ ionic serve #运行之后浏览器会自动新建一个标签页用来显示创建的应用,默认端口 8100

 

关于 ionic 的一些简单说明

关于目录结构的说明,参考链接:ionic2入门教程(四)解读目录结构

 

留言板 当前主题:0

留言审核后可见.

相关杂记
快递查询插件--快递管家(支持国际件,自动提醒)

双十一到了,剁手族们的购物车内肯定囤积了很多的待购商品,可以想象之后快递员又有的忙了。这里放出一个自制的浏览器插件

阅读更多>>
javascript 里的 new 操作和继承(全记录)

主要是记录下 js 里关于 new 和 继承的细节,因为网上的资料都比较分散,这里汇总下,并且加上了思考的过程。

阅读更多>>
使用CDN来加载js等文件

博客里常常会带有一些代码演示的内容,这时候就希望代码里的关键词能够高亮显示。

阅读更多>>
DOS快餐店连载系列下载

这是很早之前《电脑爱好者》杂志上连载的内容,一共12期,主要是以小故事的形式讲解了 windows 下命令行工具的使用。例如批量重命名,循环等。

阅读更多>>
ionic3 自定义图标文件(亲测可用)

首先准备好用来做图标的 svg 文件,你可以自己用 ai 画或者去网上下载就行啦,如下图所示:

阅读更多>>