nuxt中使用分享插件vue-social-share步骤详解及字体图标显示问题

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

网站开发中对于分享的使用,在一些类似新闻类的网站中是非常频繁的一个使用操作。那么nuxt项目中我们要如何运用分享操作呢?使网站中的文章能够正常分享到qq、微博等社区。

效果如图:


步骤一:安装插件

npm install vue-social-share -S

步骤二:nuxt.config.js中进行配置插件

plugins: [
{ src: "~/plugins/vue-social-share.js", ssr: false},
],

步骤三:plugins文件夹中创建vue-social-share.js,内容如下

import Vue from 'vue'
import Share from 'vue-social-share'
import 'vue-social-share/dist/client.css';
Vue.use(Share)

步骤四:页面中进行引用及对应配置

<share :config="config"></share>
config: {
url: 'https://www.xuexiareas.com/', // 网址,默认使用 window.location.href
source: 'https://www.xuexiareas.com/', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" /> title: '六月初博客站', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
description: '六月初博客站,是一个记录自己生活点滴、互联网技术的原创独立博客。', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />
image: 'https://www.xuexiareas.com/upload/20181017/3453960dc2bc1e5886832e2d295cb4b6.jpg', // 图片, 默认取网页中第一个img标签,***注意这里image是string类型,不是标签***
sites: ['qzone', 'qq', 'weibo', 'wechat', 'douban', 'google', 'facebook', 'twitter', 'linkedin', 'diandian',
'tencent'
], // 启用的站点
disabled: [], // 禁用的站点
wechatQrcodeTitle: '微信发现扫一扫:分享', // 微信二维码提示文字
wechatQrcodeHelper: '<p>微信里点“发现”,扫一下<p>二维码便可将本文分享至朋友圈。'
}

以上便是关于vue-social-share的基础使用,运行后如果正常那么就会出现最顶部的截图样式。若发现字体图标没有正常显示,我们要如何处理呢?

在nuxt引入外部全局样式。既nuxt.config.js中配置使用全局样式

head: {
link: [
{ rel: 'stylesheet', type: 'text/css', href: 'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css' }
]
},

如果你有更好的方法,欢迎指出。