NativeScript with Vue Master Detail Template

应用模板可以帮助您使用内置 UI 元素和最佳实践快速启动原生跨平台应用。在创建新应用时，节省重复编写样板代码的时间。

此 Master-Detail 模板是任何需要显示对象集合及其详细信息并在在线和离线模式下同时使用 Firebase 作为后端的应用的基本构建块。该模板使用 RadListView 组件来显示主列表。RadListView 组件是 Progress NativeScript UI 的一部分。

关键功能

• 可编辑的 Master-Detail 界面
• 与 Firebase 数据库集成
• 离线工作
• 可定制主题
• UX 和开发最佳实践
• 易于理解的代码

快速开始

执行以下命令以从该模板创建应用

ns create my-master-detail-vue --template @nativescript/template-master-detail-vue

注意：此命令将创建一个使用发布到 npm 的最新版本的此模板的新 NativeScript 应用。

如果您想创建一个使用来自 main 分支的模板源的新应用，您可以执行以下操作

# clone nativescript-app-templates monorepo locally
git clone [email protected]:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-master-detail-vue --template nativescript-app-templates/packages/template-master-detail-vue

注意：请注意，主分支可能引用尚未在 NPM 上的依赖项！

教程

架构

模板具有以下组件

• /app/components/CarList.vue - 主列表页面。获取数据并在列表中显示它。在项目上点击时，它将导航到项目详细信息页面。
• /app/components/CarDetails.vue - 项目详细信息页面。显示被点击项目的详细信息。有一个 编辑 按钮可以导航到编辑页面。
• /app/components/CarDetailsEdit.vue - 项目详细信息编辑页面。为所选项目提供编辑选项。点击 完成 按钮保存更改。

有一个模型来表示数据项

• /app/shared/cars/car-model

模板还提供了一个数据服务

• /app/shared/cars/car-service - 作为主-详细信息数据项的数据层。封装用于在数据库上执行操作的函数。

Firebase 集成

模板使用 {N} Firebase 插件。初始化是在 /app/app.js 文件中在应用启动之前完成的。

[可选] Firebase 数据库设置

设计上，应用连接到 Firebase 中示例数据的只读副本。如果您想看到“编辑”功能的实际操作，您需要克隆示例数据并更新应用配置，使其指向您自己的 Firebase 设置。您可以在 此处 找到如何实现的详细说明。

样式

此模板已设置为使用 SASS 进行样式设置。所有使用的类都是基于 {N} 核心主题的 - 咨询 文档 以了解如何自定义它。

该应用根目录下有3个全局样式文件

• /app/_app-common.scss - 全局通用样式表。这些样式规则适用于Android和iOS。
• /app/app.android.scss - 全局Android样式表。这些样式规则仅适用于Android。
• /app/app.ios.scss - 全局iOS样式表。这些样式规则仅适用于iOS。

获取帮助

NativeScript框架拥有一个充满活力的社区，当您遇到问题时可以提供帮助。

尝试加入NativeScript社区Discord。Discord频道是解决故障和与其他NativeScript开发者建立联系的好地方。

如果您发现此模板存在问题，请在NativeScript仓库中报告问题。

贡献

我们热爱Pull Requests，并乐于接受。请随时提出更改和新想法。我们将进行审查和讨论，以便它们被接受并更好地整合。