Vue-router showing blank page

Hi there,
I created a vue program, however is showing a blank page.

This is my main.vue:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

import LoginComponent from './pages/login/LoginComponent'

Vue.config.productionTip = false

const routes = [
    path: '/',
    component: LoginComponent

const router = new VueRouter({
  routes // short for `routes: routes`

new Vue({
  render: h => h(App),

Here is my App.vue code:

      <div id="app">

    export default {};


My LoginComponent.vue code:


    export default {

    <style scoped>

and my index.html code:

    <!DOCTYPE html>
    <html lang="">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        <div id="app"></div>
        <!-- built files will be auto injected -->

Someone can help me?

Not sure how webpack works, but shouldn’t index.html contain a <script> element that loads your compiled JavaScript code? Or will webpack add that automatically for you?