在 Nuxt 中使用 Valine

如果要使用 Valine，需要有 Leancloud 账号才行，如果没有可以浏览配置LeanCloud 统计访问数据

效果预览

Collect Seeds

使用方法

  1. 安装 Valine
1
2
3
4
5
# npm
npm install valine --save

# yarn
yarn add valine
  1. 创建 Valine 组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div id="comentario"></div>
</template>

<script>
export default {
  name: "ValineComponent",
  mounted() {
    import("valine").then((res) => {
      const Valine = res.default;

      const valine = new Valine({
        // eslint-disable-line no-unused-vars
        el: "#comentario",
        appId: "your appId",
        appKey: "your appKey",
        serverURLs: "your REST API",
        avatar: "wavatar",
        visitor: true,
        recordIP: true,
        placeholder: "说说你想法",
      });
    });
  },
};
</script>
  1. 再将 Valine 组件引入到需要使用 Valine 的页面文件中使用就行了

遇见的坑

  1. 首先是 eslint 方面的约束

    • 使用 new 关键字创建的对象，需要创建一个变量去接收；
    • 创建的变量需要被使用

    Valine 对象又不需要使用，这两点就直接死循环了，没办法只能使用 // eslint-disable-line no-unused-vars，让 eslint 允许这个变量不被使用

  2. Valine 默认发送请求的路径是 https://us.leancloud.cn/1.1/classes/Comment，这样发送请求会请求失败，所以我们需要单独设置请求的路径，也就是 serverURLs: '' ;而这个服务器路径需要在 Leancloud 中查看 [设置 >> 应用凭证 >> REST API 服务器地址]，将这个地址复制粘贴到 serverURLs 配置项就行了

Rest_API