vue查看本地相册_使用Vue.js构建的Google相册相册查看器

vue查看本地相册

google-photos-vue (google-photos-vue)

Google Photos album viewer built with Vue.js.

使用Vue.js构建的Google相册相册查看器。

特征 (Features)

格式 (Formats)

照片 (Photo)

Conventional grid.

常规网格。

文本 (Text)

Justified layout highlighting the "quoted" word (i.e. theme) in each photo description.

合理的布局，在每个照片描述中突出显示“引用”一词(即主题)。

语境 (Contexts)

已认证 (Authenticated)

The default state initializes gapi. Once authenticated, the user can select one of their albums, and its full contents is loaded.

默认状态初始化gapi 。 身份验证后，用户可以选择其专辑之一，并加载其全部内容。

未经身份验证 (Unauthenticated)

Vuex application state JSON is exposed in the authenticated context. The state is modified with relative base URLs that are compatible with the naming conventions of page assets when saved via Google Chrome.

Vuex应用程序状态JSON在经过身份验证的上下文中公开。 当通过Google Chrome保存时，将使用与页面资产的命名约定兼容的相对基本URL修改状态。

When downloaded, served, and configured, i.e.

下载，投放和配置后，即

<div id="app" data-external-state-path="365-2019-state.json"></div>

the Vue.js application functions in an unauthenticated context, initialized with this static state.

Vue.js应用程序在未经身份验证的上下文中运行，并使用此静态状态进行了初始化。

A working example of this context can be seen in the gh-pages-src branch, which is built and served via GitHub Pages.

可以在gh-pages-src分支中看到此上下文的一个有效示例，该分支是通过GitHub Pages构建和提供的。

分析工具 (Analytics)

Media clicks are instrumented with Google Analytics Events when configured.

配置后，媒体点击将通过Google Analytics(分析)事件进行检测。

用法 (Usage)

1. Setup Google OAuth 2.0 and include your Client ID in main.ts.

   设置Google OAuth 2.0，并在main.ts包含您的客户端ID。

2. Optionally setup Google Analytics and include your ID in main.ts.

   (可选) 设置Google Analytics(分析)并将您的ID包含在main.ts 。

3. Build the application via:

   通过以下方式构建应用程序：

   npm run serve

   or other Vue CLI commands.

   或其他Vue CLI命令。

翻译自: https://vuejsexamples.com/google-photos-album-viewer-built-with-vue-js/

vue查看本地相册