【日常点滴014】web腾讯云开发初始化0-1配置

vue3.0入坑笔记

https://blog.youkuaiyun.com/weixin_43521165/article/details/103715931

1.云开发cli安装

npm i -g @cloudbase/cli
可能需要花点时间

2.vscode 插件安装

3.利用vue创建一个项目

node.js 版本要12.0以上 不是的话 windows是去node官网下载后重新覆盖安装就可以了

选择默认的配置即可 我

安装成功

4 .安装配置云开发tcb-js-sdk

npm install --save tcb-js-sdk@latest

进入项目目录后 再执行命令

安装好后 在main.js 初始化一下 并简单使用一下定义的app变量 不使用就会报错

完整代码：

import { createApp } from 'vue'
import App from './App.vue'

const tcb   =require('tcb-js-sdk')
const app = tcb.init({
    env:'vue-demo1-2gvojutxce1c762a'
})

app.auth({
    persistence:"local"
}).anonymousAuthProvider().signIn().then(item=>{
    console.log('登录成功',item)
}).catch(err=>{
    console.log('登录失败',err)
})

createApp(App).mount('#app')

此时还不支持匿名登录 可以在云开发控制台进行配置

5.配置匿名登录方式

6.配置安全域名

7.调用云数据库

import { createApp } from 'vue'
import App from './App.vue'

const tcb   =require('tcb-js-sdk')

const app = tcb.init({
    env:'vue-demo1-2gvojutxce1c762a'
})


app.auth({
    persistence:"local"
}).anonymousAuthProvider().signIn().then(item=>{
    console.log('登录成功',item)
    const db = app.database();
    const userDb = db.collection('user')
    userDb.get().then(res=>{
        console.log('数据库返回值：',res)
    })
    
}).catch(err=>{
    console.log('登录失败',err)
})

createApp(App).mount('#app')

8.调用云函数

结果展示

创建好后 再用编辑器重新打开之前的项目文件

可能遇到的问题 1：

问题 2 ： 点击生成配置文件即可 下面会多出来一个cloudbaserc。json的文件

9.静态页面部署

cloudbase 和 tcb 可以互换使用

1.发布代码前 先打包代码

2.进行部署 一定记得在云开发的控制台要开启托管功能
npm run build
tcb login
tcb hosting deploy -e 云开发环境名字

然后你的网站就可以被互联网访问了