Делаю с помощью webpack'a и при обновлении выдаёт ошибку:
build.js:1 Uncaught TypeError: r.use is not a function
var Vue = require('vue')
var VueRouter = require('vue-router')
var About = require('./src/about.vue')
var Brand = require('./src/brand.vue')
Vue.use(VueRouter)
var router = new VueRouter({
routes: [
{ path: '/about', component: About},
{ path: '/brand', component: Brand}
]
})
new Vue ({
el: '#app',
router: router
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-bottom: 80px;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
}
/* HEADER */
header {
height: 80px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 18px 30px 20px;
}
.logo {
display: block;
height: 40px;
object-fit: cover;
float: left;
margin-right: 50px;
}
nav {
font-size: 16px;
padding: 10px 0 14px;
height: 40px;
font-weight: 500;
}
nav a {
margin: 0 26px 0 0;
color: rgba(10, 10, 10, 1);
}
nav a.router-link-active {
color: rgba(255, 255, 255, 1);
}
.grey {
color: rgba(187, 187, 187, 1);
}
/* PAGES */
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 100px;
color: black;
display: block;
width: 960px;
}
.projects {
background-color: rgba(242, 199, 48, 1);
}
.brands {
background-color: rgba(75, 192, 226, 1);
}
.contacts {
background-color: rgba(126, 102, 241, 1);
}
/* BLOG */
.blog {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 80px;
}
.blog__post {
width: 100%;
position: relative;
float: left;
height: 350px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.blog__post img {
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: brightness(70%);
}
.blog__post h3 {
font-size: 32px;
line-height: 32px;
color: #fff;
font-weight: 300;
text-align: center;
z-index: 2;
}
.blog__post a {
height: 48px;
border: 1px solid #fff;
border-radius: 4px;
color: #fff;
font-size: 16px;
font-weight: 500;
line-height: 46px;
display: block;
z-index: 2;
padding: 0 48px;
text-align: center;
}
.blog__post a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* POST */
.post {
padding-top: 80px;
}
.post img {
width: 100%;
object-fit: cover;
height: 500px;
object-position: top center;
margin-bottom: 40px;
}
.post h2 {
font-size: 29px;
line-height: 30px;
color: #1f1f1f;
margin: 0 auto 40px;
max-width: 640px;
}
.post p {
font-family: "PT Serif", serif;
font-size: 18px;
color: rgba(0, 0, 0, 0.6);
line-height: 28px;
margin: 0 auto 50px;
max-width: 640px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-router</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="build.js"></script>
</body>
</html>
<!-- About.vue -->
<template>
<section>
<h2>Хоп хей лалей</h2>
</section>
</template>
<!-- Brand.vue -->
<template>
<section class="brands">
<h2>Бренды</h2>
</section>
</template>
build.js:1 Uncaught TypeError: o is not a constructor