初试ionic

安装ionic所有步骤

　　1.安装 nodejs npm

　　2.通过 npm 安装ionic cordova

　　3.通过 npm 构建ionic

　　4.编译 ionic

　　5.文档结构

　　6.Q&A

具体步骤

　　1.安装nodejs npm

　　　　具体步骤出门百度 菜鸟教程nodejs npm 基本一路next 可能需要配置一下环境变量（nodejs集成了npm不用另装npm）

　　　　然后测试一下 cmd 里 node -v

　　　　

　　　　npm  npm -v

　　　　

　　2.安装 ionic cordova

　　　　npm 是国外的安装模块超级慢 所以先安装淘宝镜像

　　　　打开cmd 输入 npm install -g cnpm

　　　　

　　　　安装 ionic （一定要注意版本不要按官方的装 当前ionic4以上不稳定bug很多） 

　　　　命令 cnpm install -g ionic@3.20.0

　　　　验证同样是 ionic -v

　　　　安装 cordova

　　　　命令 cnpm install -g cordova

　　　　验证 cordova -v

　　　　

　　　　

　　3.通过 npm 构建ionic

　　　　在磁盘里新建文件夹 打开 然后按住shift 点右键

　　　　

　　　　如果没有这个就cd进去 也是一样的

　　　　

　　　　执行安装命令 ionic start HelloWorld tabs

　　　　

　　　　这个步骤会自动给你当前文件夹下构建一个标准的ionic框架，里边有很多ionic依赖模块大概200M+ 所以请耐心等待 如果不小心中断 进入 HelloWorld 文件夹 执行命令 cnpm i（网速不慢的话最多也就十分钟 太久直接关掉 不用担心）

　　4.编译 ionic

　　　　进入HelloWorld 文件夹 打开cmd or cd进去 执行命令 ionic serve

　　　　

　　　　出现一大堆时间并且跳出浏览器页面 说明运行成功 如果控制台ERROR 或WX留言或电联。。

　　　　

　　　　5.文档结构

　　　　

　　　　文件夹 node_modules 是编译或者框架的模块依赖 有angular sass乱遭的1000多个文件夹

　　　　resources 是安卓和苹果的一些样式资源

　　　　最重要的、真正可操作的就是src和www文件夹

　　　　src是编译前样式 www是编译后样式

　　　　也就是说 我们写前端UI代码JS等都是在src里写 然后重新步骤4 nodejs编译一下才能在www文件夹里的index.html看到样式

　　　　nodejs AngularJs Sass这些依赖也会编译合成到一个JS里 但是无所谓 只需要在src中coding就可以 并且src中结构清晰 不用去管www中的东西

　　6.Q&A

　　　　

　　　　通过文件结构和效果图对比也可以推测到 点击页面home按钮就会加载home 文件夹下的home.html

　　　　contact 和about 也是一样

　　　　tabs文件夹就是用来管理页面下边的按钮

　　　　具体页面与按钮的对应是通过src/app中文件设置的(angularJs框架语法)

 

未完待续。。。

Charles王志会