Блог

Главная - Вопросы по программированию - Приложение Vue-router отображается в codepen, но не на реальном сервере

Приложение Vue-router отображается в codepen, но не на реальном сервере

#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
});
Метки: ,