NativeScript 与 Vue 侧边导航模板

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

具有 RadSideDrawer 组件的导航模板。RadSideDrawer 组件是 Progress NativeScript UI 的一部分。

主要功能

• 侧边栏导航
• 五个与抽屉导航关联的空白页面
• 可定制的主题
• UX 和开发最佳实践
• 易于理解的代码

快速入门

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

ns create my-drawer-vue --template @nativescript/template-drawer-navigation-vue

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

如果您想创建一个使用 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-drawer-vue --template nativescript-app-templates/packages/template-drawer-navigation-vue

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

教程

架构

有一个组件用于将 RadSideDrawer 实例设置为应用程序根视图

• /app/components/App.vue - 设置 RadSideDrawer 抽屉内容和定义页面的导航框架。

RadSideDrawer 具有以下组件结构

• RadSideDrawer - 在页面上显示抽屉的组件。
• RadSideDrawer.drawerContent - RadSideDrawer 的一部分，它包含一个槽 drawerContent，用于显示抽屉的内容。
• RadSideDrawer.mainContent - RadSideDrawer 的一部分，它包含页面的主要内容。

模板具有以下空白页面组件

• /app/components/Home.vue
• /app/components/Browse.vue
• /app/components/Search.vue
• /app/components/Featured.vue
• /app/components/Settings.vue

样式

此模板配置为使用 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 存储库 中报告问题。

贡献

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