快速实现一个带后端服务的 Vue 项目,用云开发Vue插件!
发布于 5 年前 作者 fang70 803 次浏览 来自 分享

导语

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

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

云开发 Vue 插件

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

如何使用

安装

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

npm install --save [@cloudbase](/user/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](/user/cloudbase)/vue-provider"

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

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

其他组件

除了 Login State ,云开发的 Vue 组件还提供了其他一些组件,帮助你更好的开发应用。

LoginState 获取并绑定登录状态
DatabaseQuery 数据库查询
DatabaseWatch 数据库实时推送
CloudFile 获取云存储中的文件

关于这些组件的详细使用说明,你可以访问组件文档查看。

插件文档

更多使用说明,可以访问如下地址查看

<a href="http://docs.cloudbase.net/cloudbase-vue/introduce.html" rel="noopener" target="_blank">http://docs.cloudbase.net/cloudbase-vue/introduce.html</a>
<a href="https://github.com/TencentCloudBase/cloudbase-vue" rel="noopener" target="_blank">https://github.com/TencentCloudBase/cloudbase-vue</a>

总结

Vue 插件的发布,可以大大降低开发者使用云开发开发应用的门槛,帮助开发者快速构建 Web 应用。无论你是要做活动营销页面,还是为你的小程序开发一个管理控制台,都可以轻松实现。

小调查

除了 Vue 插件以外,你还期待有什么插件呢?

公众号:腾讯云云开发

腾讯云云开发:https://cloudbase.net

云开发控制台:https://console.cloud.tencent.com/tcb?from=12304


更多精彩
扫描二维码了解更多

回到顶部