#javascript #html #vue.js #sass
#javascript #HTML #vue.js #sass
Вопрос:
Я нашел это (https://codepen.io/chroriginal/pen/aEQEqq?editors=0110 ) codepen показывает одностраничное приложение Vue-Router, и я хотел попробовать изменить его и разместить на своем компьютере.
Однако все, что я вижу, это неупорядоченный список из раздела заголовка («Вау», «Удивительно»).
Как мне сделать так, чтобы то, что я вижу в codepen, отображалось с моего компьютера (помимо изменения некоторых слов)?
Вот мой код:
мой html-файл:
<!DOCTYPE html>
<html lang="en">
<head>
<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="stylesheet" href="style.scss" />
<title>Random project</title>
</head>
<body>
<div id="app">
<header id="header">
<ul id="header__nav--list">
<li><router-link to="/component/a">Wow</router-link></li>
<li><router-link to="/component/b">Amazing</router-link></li>
</ul>
</header>
<main>
<transition name="translate" mode="in-out">
<router-view></router-view>
</transition>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>
мой файл scss:
#app {
font-size: 20px;
color: black;
}
$headerHeight: 50px;
#app{
font-family: 'Quicksand', sans-serif;
font-weight: lighter;
height: 100vh;
width: 100vw;
#header {
width: 100vw;
height: $headerHeight;
position: fixed;
background: #fff;
box-shadow: 0px -1px 12px 5px rgba(0, 0, 0, 0.1);
z-index: 1;
#header__nav--list {
display: flex;
justify-content: space-around;
margin: 0px;
width: 50%;
min-width: 400px;
max-width: 800px;
transform: translateX(-50%);
left: 50%;
position: relative;
list-style: none;
li {
height: $headerHeight;
display: inline-flex;
align-items: center;
background: #fff;
padding: 0px 20px;
a {
color: #000;
text-decoration: none;
text-transform: lowercase;
transition: color .3s ease-in-out;
amp;:hover {
color: #555;
}
}
}
}
}
main {
position: relative;
top: 50px;
width: 100vw;
height: calc(100vh - #{$headerHeight});
section {
width: inherit;
height: inherit;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: 0px -1px 12px 5px rgba(0, 0, 0, 0.3);
amp;#component--a {
background: #FFF;
color: #000;
}
amp;#component--b {
background: #F3F3F3;
color: #000;
}
}
}
}
.translate-enter {
transform: translateY(-100%);
}
.translate-enter-active {
transition: transform .6s cubic-bezier(0.66, 0.36, 0.65, 0.87);
}
.translate-leave-active {
transition: transform .6s cubic-bezier(0.66, 0.36, 0.65, 0.87);
transform: translateY(100%);
}
и мой файл javascript:
// import vue-components
const ComponentA = {template: `
<section id="component--a">
<h1>Do you like turkeys?</h1>
<p>Welcome to the DARK side...</p>
</section>
`}; // could be vue-file component
const ComponentB = {template: `
<section id="component--b">
<h1>I REALLY like turkeys, man</h1>
<p>okay.</p>
</section>
`};
// defining routes
const routes = [
{
path: '/component/a',
alias: '/',
name: 'Component A',
component: ComponentA
},
{
path: '/component/b',
name: 'Component B',
component: ComponentB
}
];
// instantiate VueRouter with the routes above
const router = new VueRouter({routes});
// initializing vue
new Vue({
el: '#app',
router
});