网站开发中对于分享的使用，在一些类似新闻类的网站中是非常频繁的一个使用操作。那么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' }
  ]
},

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