组件用.vue还是.js_社交共享的Vue.js组件-CSDN博客

组件用.vue还是.js

有价值分享 (vue-goodshare)

Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.

社交共享的Vue.js组件。一种在最流行(并非如此)的社交网络中共享网站页面上的链接的简单方法。由goodshare.js项目提供支持。

View demo 查看演示 Download Source 下载源

特征 (Features)

Simple install, extensive documentation, developer support, SEO friendly, many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed.

简单的安装，丰富的文档，开发人员支持，SEO友好，用于外观自定义的许多选项，无需脚本即可在页面上跟踪用户活动的干净代码，高速。

Beautiful button design already included. Just choose one, add attribute to component and save!

漂亮的按钮设计已经包括在内。只需选择一个，将属性添加到组件并保存！

要求 (Requirements)

Vue.js >= 2.4.0
Vue.js> = 2.4.0
vue-style-loader >= 3.0.0
vue-style-loader> = 3.0.0
css-loader >= 0.28.0
CSS加载器> = 0.28.0
sass-loader >= 6.0.0
sass加载程序> = 6.0.0
node-sass >= 4.6.0
节点ass> = 4.6.0

安装组件 (Install component)

$ npm install vue-goodshare --save

用法 (Usage)

Init vue-goodshare component after Vue.js in your main JavaScript file. There is two way to do this.

初始化vue-goodshare后组件Vue.js在主JavaScript文件。有两种方法可以做到这一点。

单股元素 (Single share element)

Includes only needed social networks and/or mobile messengers.

仅包括所需的社交网络和/或移动Messenger。

// ./src/js/script.js

import Vue from 'vue'

// Import vue-goodshare single elements
import VueGoodshareFacebook from 'vue-goodshare/src/providers/Facebook.vue'

const app = new Vue({
  el: '#app',
  components: {
    VueGoodshareFacebook
  }
})

Add components to HTML template (with attributes):

将组件添加到HTML模板(具有属性)：

<!-- ./index.html -->

<div id="app">

  <vue-goodshare-facebook 
    page_url="https://github.com" 
    title_social="Facebook"
    has_counter
    has_icon 
  ></vue-goodshare-facebook>
  
</div>

And result is:

结果是：

捆绑共享元素 (Bundle of share elements)

Facebook, Twitter, LinkedIn, Google Plus, Tumblr, Pinterest, Reddit

Facebook，Twitter，LinkedIn，Google Plus，Tumblr，Pinterest，Reddit

// ./src/js/script.js

import Vue from 'vue'

// Import vue-goodshare bundle
import VueGoodshare from 'vue-goodshare'

const app = new Vue({
  el: '#app',
  components: {
    VueGoodshare
  }
})

Add component to HTML template (without attributes):

将组件添加到HTML模板(无属性)：

<!-- ./index.html -->

<div id="app">

  <vue-goodshare></vue-goodshare>

</div>

And result is:

结果是：

在localhost上进行实时演示和测试 (Live demo & Testing on localhost)

Clone repository from GitHub:
从GitHub克隆存储库：

$ git clone https://github.com/koddr/vue-goodshare.git

Go to examples folder:
转到examples文件夹：

$ cd vue-goodshare/examples

Start simple Python 3.4+ HTTP server (only macOS and Linux):
启动简单的Python 3.4+ HTTP服务器(仅macOS和Linux)：

$ python3 -m http.server 4000 --bind localhost

翻译自: https://vuejsexamples.com/vue-js-component-for-social-share/

组件用.vue还是.js