NativeScript Groceries 示例项目教程

NativeScript Groceries 示例项目教程

sample-Groceries:green_apple: :pineapple: :strawberry: A NativeScript-built iOS and Android app for managing grocery lists项目地址:https://gitcode.com/gh_mirrors/sa/sample-Groceries

1. 项目的目录结构及介绍

sample-Groceries/
├── app/
│   ├── App_Resources/
│   ├── fonts/
│   ├── images/
│   ├── item/
│   ├── list/
│   ├── login/
│   ├── shared/
│   ├── app.css
│   ├── app.js
│   ├── app.ts
│   ├── main-page.js
│   ├── main-page.xml
│   ├── package.json
│   └── tsconfig.json
├── hooks/
├── node_modules/
├── platforms/
├── package.json
└── tsconfig.json

• app/: 包含应用程序的主要代码和资源文件。
  • App_Resources/: 包含平台特定的资源，如启动画面和图标。
  • fonts/: 包含自定义字体文件。
  • images/: 包含应用程序使用的图像文件。
  • item/, list/, login/, shared/: 包含不同模块的代码和视图文件。
  • app.css: 全局样式文件。
  • app.js, app.ts: 应用程序的入口文件。
  • main-page.js, main-page.xml: 主页面的逻辑和视图文件。
  • package.json: 项目依赖和脚本配置文件。
  • tsconfig.json: TypeScript 配置文件。
• hooks/: 包含自定义脚本，用于在构建过程中执行特定任务。
• node_modules/: 包含项目依赖的 npm 包。
• platforms/: 包含特定平台的构建输出。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 app/app.ts 或 app/app.js，具体取决于项目使用的是 JavaScript 还是 TypeScript。这个文件负责初始化应用程序并设置导航。

// app/app.ts
import { Application } from '@nativescript/core'
import { LoginComponent } from './login/login.component'

Application.run({ moduleName: 'app-root' })

3. 项目的配置文件介绍

• package.json: 包含项目的依赖、脚本和其他元数据。

{
  "name": "sample-Groceries",
  "version": "1.0.0",
  "description": "A NativeScript-built iOS and Android app for managing grocery lists",
  "main": "app/app.js",
  "scripts": {
    "clean": "rm -rf platforms/",
    "android": "tns run android --bundle",
    "ios": "tns run ios --bundle"
  },
  "dependencies": {
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.0",
    "nativescript-vue": "~2.8.0"
  },
  "devDependencies": {
    "@nativescript/webpack": "~5.0.0",
    "typescript": "~4.0.0"
  }
}

• tsconfig.json: TypeScript 编译配置文件。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "lib": ["es6", "dom"],
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "app/types/*"]
    }
  },
  "include": ["app/**/*.ts"]
}

这些配置文件确保项目能够正确编译和运行，并且包含必要的依赖和脚本。

sample-Groceries:green_apple: :pineapple: :strawberry: A NativeScript-built iOS and Android app for managing grocery lists项目地址:https://gitcode.com/gh_mirrors/sa/sample-Groceries