vue环境下增加分享功能

一、安装分享插件
npm install vue-social-share -S
二、在main.js下,加入以下内容：
import Share from ‘vue-social-share’
import ‘vue-social-share/dist/client.css’
import ‘…/node_modules/social-share.js/dist/js/social-share.min.js’
Vue.use(Share)
三、在页面添加入内容：
1、template中加入

2、script的return中加入
config:{
sites: [‘qq’,‘wechat’],
wechatQrcodeTitle : ‘微信扫一扫：分享’,
wechatQrcodeHelper : ‘

扫一扫

二维码便可将本文分享至朋友圈。

’
}
3、如果页面上的QQ、微信等图标显示不出来,用以下方式解决:
在项目 node_modules中找到 vue-social-share的static中的字体资源，移动到项目根目录下的static目录下.
四、更多分享
config: {
// url: “”, // 网址，默认使用 window.location.href
source: “”, // 来源（QQ空间会用到）, 默认读取head标签：
title: “”, // 标题，默认读取 document.title 或者
description: “”, // 描述, 默认读取head标签：
image: “”, // 图片, 默认取网页中第一个img标签
sites: [
“qzone”, //qq空间
“qq”, //QQ
“weibo”, //微博
“wechat”, //微信
“douban”, //豆瓣
“tencent”, //QQ微薄
“linkedin”, //领英
“google”, //谷歌
“facebook”, //脸书
“twitter”, //推特
], // 启用的站点
// disabled: [“google”, “facebook”, “twitter”], // 禁用的站点
wechatQrcodeTitle: “微信扫一扫：分享”, // 微信二维码提示文字
wechatQrcodeHelper:
“

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。

”,
},
五、插件官网
https://www.npmjs.com/package/vue-social-sharing