In this tutorial will set up a basic javascript App(vue.js) and incorporate Salesforce Lightning Design System into it , so we can leverage the font, style and design assets(SVG) of SLDS to build an Application with salesforce look and feel.

Initial Setup :
1.Download Vue js CLI using npm(node package Manager).

npm install -g @vue/cli

2. Create Project

vue create my-project

3.Project Successfully Created

4.Install SLDS via NPM

npm install @salesforce-ux/design-system --save

5. If its successfully installed u will be able to find salesforce-ux under node modules.

Import Salesforce CSS into Vue components :
Under <Script> tag in components import salesforce CSS.

import "@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css";

Import Salesforce Sans font into the project :
Navigate to App.vue (src\App.vue)
under <style> tag

@font-face {
  font-family: "Salesforce Sans";
  src: local('Salesforce Sans'),
  url("~@salesforce-ux/design-system/assets/fonts/SalesforceSans-Regular.ttf")format('truetype');
}

Now we have incorporated Salesforce Sans font into our application , we can use it Vue Components.
Under <Style> tag in components :

body {
  font-family: "Salesforce Sans", sans-serif;
}

Import SVG assets:
In slds documentation if we have come across <svg> tag like this , they are the SLDS assets .

<svg class="slds-icon slds-page-header__icon" aria-hidden="true">
   <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
 </svg>

Now we will be using it in our components by importing the SLDS design assets.
under <template> tag :

<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
   <use:xlink:href="require('@salesforce-ux/design-system/assets/icons/utilitysprite/svg/symbols.svg')+'#builder'"></use>
</svg>

this code will import the builder icon.
To import any assets we need to replace this line of code:

<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>

with this code :

<use :xlink:href="require('@salesforce-ux/design-system/assets/icons/utility-sprite/svg/symbols.svg')+'#builder'"></use>

By prepending xlink:href with “:” make it dynamic so we can use require() to import assets dynamically from node modules.

Final output :
Command to run application in localhost :

npm run serve