Как перенести приложение с Vue.js на Nuxt.js?

164

02 марта 2019, 20:00

Всем привет. Есть такой код на Vue.js:

const SubWrapper = { 
  name: 'SubWrapper', 
  template: '#sub-wrapper', 
   
  data () { 
    return { 
      width: '', 
      height: '', 
    } 
  }, 
   
  methods: { 
  handleResize () { 
      this.width = this.$el.clientWidth; 
      this.height = this.$el.clientHeight; 
    } 
  }, 
   
  mounted () { 
    this.$nextTick(() => { 
      this.width = this.$el.clientWidth; 
      this.height = this.$el.clientHeight; 
    }) 
  } 
}; 
 
 
 
 
 
const MyTemplateCanvas = { 
  name: 'MyTemplateCanvas', 
  template: '#my-template-canvas', 
   
  watch: { 
  	width (width) { 
    	this.canvas.width = width; 
  	}, 
    height (height) { 
    	this.canvas.height = height; 
  	} 
  }, 
   
  computed: { 
  	width () { 
    	return this.$parent.width; 
    }, 
    height () { 
    	return this.$parent.height; 
    }, 
    computedDatatime (index) { 
    	return this.sectionDatetime.dateTime.length; 
    } 
  }, 
   
  data () { 
    return { 
      canvas: { 
        width: '', 
        height: '', 
        stroke:'gray' 
      }, 
      chart: { 
        x: 50, 
        y: 50, 
        width: 260, 
        height: 160, 
        fill: "gray", 
        stroke: "#2a1725", 
        strokeWidth: 2 
      }, 
      wrapDatetime: { 
        x: 52, 
        y: 178, 
        width: 256, 
        height: 30, 
        fill: "#fff", 
        stroke: "#fff", 
        strokeWidth: 2 
      }, 
      sectionDatetime: { 
        x: 51, 
        y: 177, 
        width: 2, 
        height: 32, 
        fill: "blue", 
        dateTime: [1, 2, 3], 
      } 
    } 
  } 
}; 
 
Vue.use('VueKonva'); 
 
const root = new Vue({ 
  el: '.wrapper', 
  components: { 
    SubWrapper, 
    MyTemplateCanvas 
  } 
});

div, span, a, ul, li, dl, dt, dd, fieldset, form, label, button, input, h1, h2, h3, h4, h5, h6, strong, p, br, i, figure, figcaption { 
    margin: 0; 
    padding: 0; 
    border: 0 none; 
} 
 
:focus { 
    border: 0 none; 
} 
 
button, a:hover, label:hover { 
    cursor: pointer; 
} 
 
li { 
    list-style: none outside none; 
} 
 
img { 
    border: medium none; 
} 
 
a:active, a:focus, img, input, textarea { 
    outline: none; 
} 
 
a:active { 
    background-color: transparent; 
} 
 
textarea { 
    resize: none; 
    overflow: auto; 
} 
 
th, td { 
    margin: 0; 
    padding: 0; 
} 
 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
 
html { 
    margin: 0; 
    height: 100%; 
} 
body{ 
    margin: 0; 
    background-color: #fff; 
    height: 100%; 
} 
.wrapper { 
    margin: 0 auto; 
    width: 100%; 
    height: 100%; 
} 
.wrapper .sub_wrapper{ 
    margin: 0 auto; 
    width: 100%; 
    height: 100%; 
} 
.konvajs-content{ 
    width: 100% ! important; 
    height: 100% ! important; 
} 
.wrapper .sub_wrapper canvas{ 
    background-color: #c0c0c0 ! important; 
    display: block; 
}

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
  <title>MK Trading</title> 
  <link href="style/style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
  <div class="wrapper"> 
    <sub-wrapper> 
      <my-template-canvas></my-template-canvas> 
    </sub-wrapper> 
  </div> 
 
  <script id="sub-wrapper" type="text/x-template"> 
    <div class="sub_wrapper"> 
    <resize-observer @notify="handleResize" /> 
      <slot></slot> 
    </div> 
  </script> 
 
  <script id="my-template-canvas" type="text/x-template"> 
 
    <v-stage :config="canvas"> 
 
      <v-layer> 
 
        <v-rect :config="chart"></v-rect> 
 
        <v-rect :config="wrapDatetime"></v-rect> 
 
        <v-rect :config="sectionDatetime" 
                v-for="(item, index) in computedDatatime" 
                :key="item.id"> 
        </v-rect> 
 
      </v-layer> 
 
    </v-stage> 
 
  </script> 
 
  <script src="https://unpkg.com/vue"></script> 
  <script src="https://unpkg.com/vue-resize@0.4.3/dist/vue-resize.min.js"></script> 
  <script src='https://unpkg.com/konva'></script> 
  <script src='https://unpkg.com/vue-konva'></script> 
  <script src="js/script.js"></script> 
</body> 
</html>

Вопрос: Как подключить (мне нужен набросок) все это дело в Nuxt.js? Например меня интересует такой момент: В данном коде используется Vue.use - как подключать все библиотеки(vue-resize, konva, vue-konva), после того как они предварительно установлены через NPM - в NUXT.js?

P.S. Буду благодарен за любые идеи и конструктивные предложения..