快速实现一个带后端服务的 Vue 项目，用云开发Vue插件！

Posted 2021-02-19 腾讯云·云开发CloudBase

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速实现一个带后端服务的 Vue 项目，用云开发Vue插件！相关的知识，希望对你有一定的参考价值。

导语

云开发CloudBase作为一站式的云端一体化研发平台，为前端开发者提供了一站式的计算、存储、数据库、托管等服务；开发者可以通过云开发，快速开发出一个业务完善，性能强劲的 Web 应用，极大节约了研发的时间、人力和物力成本。

秉承“为开发者提供更好用的云服务”的服务宗旨，云开发团队推出云开发Vue插件，使用云开发Vue插件，开发者可以无需搭建服务器，一键实现VUE项目的服务端构建。

云开发 Vue 插件

云开发 Vue 插件是云开发官方维护的 Vue 插件，提供全局入口、Vue 逻辑组件等功能。

如何使用

安装

在你的 Vue 项目中使用如下命令安装插件

npm install --save @cloudbase/vue-provider

使用

下面我们使用 LoginState 组件，来动态绑定当前页面的登录态。

页面初始化时，显示 未登录
之后我们调用匿名登录，如果登录成功，则文案将变成 已登录

<template>
  <div id="app">
    <LoginState v-slot="{ loginState }">
      <h1>{{ loginState ? ‘已登录‘ : ‘未登录‘ }}</h1>
    </LoginState>
  </div>
</template>

<script>
import Vue from "vue"
import Cloudbase from "@cloudbase/vue-provider"

Vue.use(Cloudbase, {
    env: "your-env-id"
})

export default {
  async created() {
    // 以匿名登录为例
    await this.$cloudbase
      .auth({ persistence: "local" })
      .anonymousAuthProvider()
      .signIn()
  }
}
</script>