快速入门: Vue

第一步：在 MemFire Cloud 仪表板中创建一个新应用。#

应用准备就绪后，进入应用，在左侧菜单->表编辑器选择 SQL 编辑器在 MemFire Cloud 数据库中创建一个表。使用以下 SQL 语句创建包含一些示例数据的国家/地区表。

  -- Create the table
  CREATE TABLE countries (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL
  );
  -- Insert some sample data into the table
  INSERT INTO countries (name) VALUES ('United States');
  INSERT INTO countries (name) VALUES ('Canada');
  INSERT INTO countries (name) VALUES ('Mexico');

第二步：创建 Vue 应用#

使用 npm init 命令创建 Vue 应用。

npm init vue@latest my-app

第三步：安装 Supabase 客户端库#

最快的入门方法是使用 supabase-js 客户端库，它提供了一些简便的API，用于在 Vue 应用程序中使用 Supabase。 导航到 Vue 应用程序并安装 supabase-js 。

cd my-app && npm install @supabase/supabase-js

第四步：创建 Supabase 客户端#

在您的 Vue 应用程序中创建一个 /src/lib 目录，创建一个名为 supabaseClient.js 的文件，并添加以下代码以使用您的项目 URL 和公共 API（匿名）密钥初始化 Supabase 客户端。

  import { createClient } from '@supabase/supabase-js'

  export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

第五步：在应用程序中查询数据

将 App.vue 文件中的现有内容替换为以下代码。

1  <script setup>
2  import { ref, onMounted } from 'vue'
3  import { supabase } from './lib/supabaseClient'
4
5  const countries = ref([])
6
7  async function getCountries() {
8    const { data } = await supabase.from('countries').select()
9    countries.value = data
10  }
11
12  onMounted(() => {
13    getCountries()
14  })
15  </script>
16
17  <template>
18    <ul>
19      <li v-for="country in countries" :key="country.id">{{ country.name }}</li>
20    </ul>
21  </template>

第六步：启动应用程序

启动应用程序并在浏览器中访问 http://localhost:5173，您应该会看到国家/地区列表。

npm run dev