Web/H5项目Vue框架使用腾讯IM即时通信-1

Fronty
4,648 阅读2分钟

1,关于Vue-Cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

2，安装Vue-Cli

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建项目

vue create my-project
# OR
vue ui

根据Vue-CLi官方文档提供的语法，我们vue create vue-im创建名为im的vue项目，注意vue-create的项目名不能是大写，会报错。

3，项目依赖

安装vue-cli依赖

用我们的IDE打开刚才新建的vue-im项目，然后npm i来安装依赖，依赖安装完之后npm serve来运行项目，项目的本地地址默认为：http://localhost:8080

安装腾讯IM即时通信依赖

// IM Web SDK
npm install tim-js-sdk --save

// 发送图片、文件等消息需要的 COS SDK
npm install cos-js-sdk-v5 --save

准备工作

  • 已创建即时通信 IM 应用并获取 SDKAppID。
  • 已获取密钥信息。

4，项目配置

在项目src目录下新建文件夹utils-在utils文件夹中新建tim.js文件tim.js，在tim.js文件中一次引入vue、tim、cos，然后按照设置im配置，最终代码如下所示:

import Vue from 'vue'
import TIM from 'tim-js-sdk'
import COS from 'cos-js-sdk-v5'

const tim = TIM.create({
    SDKAppID: 0 // 你的SDKAppID
})
tim.setLogLevel(4) // 普通级别，日志量较多，接入时建议使用
// tim.setLogLevel(1) // release级别， SDK输出关键信息，生产环境时建议使用
tim.registerPlugin({ 'cos-js-sdk': COS })
window.tim = tim
window.TIM = TIM
Vue.prototype.tim = tim
Vue.prototype.TIM = TIM

打开main.js，引入tim.js 代码如下：

import Vue from 'vue'
import App from './App.vue'
// 即时通信
import '@/utils/tim'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

到这里整个项目的初始配置已经基本完成，下面就可以开始写页面中的逻辑了。

项目已经上传到github上：vue-im

avatar
文章
阅读
粉丝