Can we use Lightning Component into Salesforce VF page? If yes how?

Yes, using lightning out the functionality of the salesforce lightning component.

Key points to remember: –

use <apex:includeLightning /> tags at the beginning of VF page This component loads the JavaScript file used by Lightning Components for Visualforce.
Lightning App must extend ltng:outApp library/interface.
We can use $Lightning.use() many times into VF page but that must reference the same lightning app.
We can only call those components that are referenced into the app.
LightningOutDemoApp.app

<aura:application access=”Global” extends=”ltng:outApp” >
<c:AccountList ></c:AccountList>
</aura:application>

Description of above code

access: – determines, if we can use the component throughout the Salesforce org or not acceptable values, are global, public, private

ltng:outApp: – Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead. using ltng:outApp we can access our lightning component into VF page or any external site.

AccountListVF.vfp

<apex:page >
<apex:includeLightning />

<– div where we will embed our lightning component –>

<div id=”lightning” />
$Lightning.use(“c:LightningOutDemoApp”, function() {
$Lightning.createComponent(“c:AccountList”,
{
“VFpageValue” : “Woohoooo, Lightning Out is an amazing feature of Salesforce Lightning”
},
“lightning”,
function(cmp) {

});
});

</apex:page>

$Lightning.use(): – Refer the lightning application that we are using.

$Lightning.createComponent(): – Used to dynamically creating the lightning component.