ionic4目录结构


通过项目实战 ,今天让我们来了解下ionic的目录结构




整体目录
在这里插入图片描述

【vscode】:里面是关于vscode对项目的管理,当前里面放的是默认打开的浏览器。

【e2e】:ionic4.x中端对端测试文件,开发过程中一般用不到 。

【node_modules】: 此为我们用npm(cnpm)命令从 本地安装的依赖包,当然如果我们需要导入其他的包都会放到这里,然后将索引 之类的放到package.json文件中。

【platforms】:此为打包的时候生成 的文件,生成android或者ios安装包需要的资源—(cordova platform add android后会生成)

【plugins】:此为打包的时候生成 的文件,插件文件夹,里面放置各种cordova安装的插件

【vscode】[resources]: android/ios资源(更换图标和启动动画)
在这里插入图片描述
{[src]} :此为我们开发人员掌握的地方:工作目录、页面、样式、脚本和图片都在此。
【www】:静态 文件,ionic build --prod生成的单页面静态资源文件,里面都是我们用到的map、png、js等文件。

【angulardoc.json】【angular.json】:angular配置文件

【gitgnore】:git设置忽略文件:忽略文件详情参照

【config.xml】:打包成app配置文件

【ionic.config.json】 【ionic.starter.json】 :ionic配置文件

【package-lock.json】 :运行npm(cnpm)install / i命令自动生成的包,用于记录 安装各个包的来源和 版本号

【package.json】 :主要用来 定义 项目中需要依赖包,就是后来自己输入 npm 其他的包(例如:npm install ng2-file-upload --save)。

【readme.txt】:根据项目设置的文本框,用来记录我们的依赖和配置文件记录等内容。

【tsconfig.json】:TS项目的根目录,指定用来编译这个项目的根文件和编译选项。

【tslint.json】:格式化和校验ts

【yarn.lock】:是一个可靠安全的依赖管理工具 ,他是自动生成的,yarn使用确定算法在将文件放置到需要的位置前构建整个依赖 关系树。参照博客 官网




src内部目录
在这里插入图片描述

【app】:应用根目录(组件、页面、服务、模块)

【assets】:内部资源文件(静态文件(图片,js框架…))

【environments】:配置启动路径:是否服务器还是本地

【theme】:主题文件 ,里面有scss文件,可设置白昼模式。

【global.scss】:全局样式css文件。

【index.html】:index入口文件

【main.ts】主入口文件

【karma.conf.js】【test.ts】:测试相关配置文件

【polyfills.ts】:主要包含angular需要的填充,并在应用程序之前加载

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章