day1: Init Project skeleton

npm uninstall -g vue-cli
vue create babyshark
cd babyshark
npm run serve

• Install Jquery JqueryUI Plugins and Bootstrap popper
  

 npm install jquery jquery-ui-dist bootstrap popper.js loadsh --save

• Inject Jquery & JqueryUI  into Vue Loading
• in main.js

import Vue from 'vue'
import App from './App.vue'
import _ from 'loadsh'
import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'bootstrap'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• in vue.config.js,  create it in path at the same as package.js .

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default'],
                _:'loadsh'
              })
        ]
      }
}

• in App.vue,

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
     <div class="content-wrap">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
  </div>
  <div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
  </div>
</template>

<script>
export default {
  name: "componentsTooltips",
  mounted: function() {
    $('[data-toggle="tooltip"]').tooltip();
    $(function(){
      console.log(_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 }));
      $( "#draggable" ).draggable();
    })
  }
};
</script>

<style>
@import'~bootstrap/dist/css/bootstrap.css';
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid #ccc!important;}
</style>

 Notice:  //TODO the bootstrap css tooltip is conflict in jquery ui. 

This is the demo finished work today.