安装

<script> 标签引入

直接使用 <script> 标签引用 CDN 资源，SlugComment 会被注册为一个全局对象。

请确保在引入移动版评论之前引入所有依赖：

• Zepto 1.2.0
• Vue 2.3.0 +

在 Vue 之后引入 SlugComment 会进行自动安装。

<script src="https://gzhcos.qq.com/components/slug-login/v1.0/index.js"></script>
<script src="//ossweb-img.qq.com/images/js/bsCommonFiles/library/vue/vue-2.min.js"></script>
<script src="//tiem-cdn.qq.com/slugteam/slug-ui/v0.17/slug-ui.min.js"></script>
<script
  src="https://tiem-cdn.qq.com/slugteam/components/comment/v4/index.min.js"
  charset="utf-8"
></script>

注意：3.6+的版本必须引入 slug-ui

开发环境 vs. 生产环境

<script> 标签引入的是使用 UMD 构建版本：开发环境下不压缩代码（index.js），生产环境下压缩代码（index.min.js）。

当然，它们之间绝非仅仅是文件大小的区别。我们会根据你当前引用的版本调用不同的服务端接口：

• 当你引用开发版本时，默认调用的是测试环境接口
• 当你引用压缩版本时，会自动切换为正式环境接口

因此在开发及测试过程中，你必须使用开发版本（index.js），它还包含我们提供的完整的错误提示：

<script
  src="https://tiem-cdn.qq.com/slugteam/components/comment/v4/index.min.js"
  charset="utf-8"
></script>

对比	index.min.js	index.js
体积	压缩版本，体积小	未压缩版本，体积大
提示	无错误提示	包含错误提示
接口	正式环境接口	测试环境接口

NPM

在大型 / 单页应用中使用评论组件，我们推荐使用 NPM 安装，NPM 能很好地和 webpack 等模块打包器配合使用。

使用 npm 或 tnpm 命令进行安装：

npm install --save-dev @tencent/comment

移动版评论组件作为一个 Vue 插件，在模块化的打包系统中，必须显式地通过 Vue.use() 来安装：

import Vue from 'vue'
import SlugComment from '@tencent/comment'

Vue.use(SlugComment)

开发环境 vs. 生产环境

值得注意的是，当你使用 npm 安装时，我们提供的是 ES Module 构建版本（comment.esm.js），该构建是用于打包工具的，因此我们不提供压缩后的版本，你有必要在你项目最终打包的时候压缩它们。

ES Module 构建保留了原始的 process.env.NODE_ENV 检测，以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换它们的环境变量以便控制 Comment 所运行的模式。把 process.env.NODE_ENV 替换为字符串字面量同样可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境使用的代码段，减少最终的文件体积。

需要注意的是，只有当 process.env.NODE_ENV == 'production' 时，评论才会调用正式环境接口，否则将默认调用测试环境接口。

使用 webpack 的 mode：

module.exports = {
  mode: 'production',
  // ...
}