Я пытаюсь создать учебный веб-сайт на локальном веб-сервере с адресом http://localhost:3000/.

Он правильно отображает страницу, когда задействованы только HTML и JavaScript, но когда я пытаюсь также включить Vue, это не работает.

Поскольку он отлично работает, когда я не включаю Vue, я подозреваю, что причина, по которой он ведет себя странно, заключается в том, что подготовленный мной файл Vue неправильно подключен к другим файлам, а файл HTML не распознает его.

Но что может быть исправлением для этого?

Я покажу немного дополнительной информации ниже.

[Каталоги и файлы]

В настоящее время все необходимые файлы хранятся в каталоге с именем slutuppgift, и эта папка содержит следующие подкаталоги и файлы.

slutuppgift/
|-- public/                 Static files
|-- |-- index.html          HTML-code 
|-- |-- feed.json           the API's JSON-data
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- app.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-kod for Express.js (the API)

Мой HTML-код (index.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="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Titel</title>
    <link rel="stylesheet" type="text/css" href="SeparateCSS.css">
  </head>
  <body>
    <div id="app"></div>

    <script src="../src/main.js"></script>   
  </body>
</html>

Мой код JavaScript (main.js)

import Vue from 'vue';
import VueRouter from './router';
import App from './app.vue';

Vue.config.productionTip = false

new Vue({
  router: VueRouter,
  render: h => h(App)
}).$mount('#app')

Мой код Vue (app.vue)

<template>
  <div >  
    <h1>Experimenting to see if the h1 is displayed</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {

    };
  }
}
</script>

Почему h1 "Experimenting to see if the h1 is displayed" не отображается? Разве недостаточно включить файл JavaScript с оператором <script src="../src/main.js"></script>, поскольку файл app.vue уже подключен к файлу main.js?

< Сильный > [ ОБНОВЛЕНО ]

Вот мой router.js код

import Vue from 'vue';
import VueRouter from 'vue-router';
import About from './views/about.vue';

// View component import
import AppHome from './views/home.vue';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      // URL when view component are displayed
      path: '/',
      name: 'home',
      // View component registration
      component: AppHome
    },
    {
      // URL when view component are displayed
      path: '/about',
      name: 'about',
      // Lazy-loaded view component
      component: About      
    }
  ]
})

2
Sean2014 1 Авг 2019 в 14:28

2 ответа

Папка slutuppgift находится непосредственно на локальном веб-сервере? При такой структуре сначала нужно скомпилировать приложение Vue.

Если вы не хотите компилировать свое приложение, вы можете создать простой HTML-файл с экземпляром Vue. В этом случае вы связываете VueJS в html-файле с <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>.

Вы можете проверить пример экземпляра Vue в официальной документации здесь.

1
DrofX 1 Авг 2019 в 12:10

Оригинальный проблемный код был следующим.

<template>
  <div >  <!-- class="app" -->
    <!-- VueRouter-component som renderas till <a href="..."> -->
    <router-link to="/">Home</router-link> &nbsp;
    <router-link to="/about">About</router-link>

    <h1>Experimenting to see if the h1 is displayed</h1>

    <main role = "main">
          <div class = "flex-topbar">
            <div><h2> Kwitter </h2></div>

            <div>
              <ul class="menu" ontouchstart="">
                <li class="category" >MENY</li>
                <li class="category1">HEM</li>
                <a href = "https://dotinstall.com" target = "_blank">
                  <li class="category2">Lär mer</li>
                </a>
              </ul>
            </div>
          </div>

      <br>
            <p>Vad händer?</p>
      <article>
            <form class = "userContainer">
              <div class = "div1">
                <img src="avatar/avatar-loggedin.jpg">
              </div>
                  <textarea rows = "5" cols = "50" name = "kweet_content">  </textarea>
              <p><button class = "kwitterBtn", type = "submit">Kwitter</button></p>
            </form>
    </article>
        <br>
    </main>
    <section>

    </section>
    <br>
    <p><button class = "JsonEx">Show previous kweets</button></p>

    <p id="showHistory"></p>

    <!-- VueRouter-component som visar den component som definerats för en url i router.js -->
    <router-view></router-view>   

  </div>
</template>

<script>
// Component import
import ExampleComponent from './components/example-component.vue';

export default {
  // Component namn
 // name: 'app',
  components: {
    // Component registrering
    ExampleComponent
  },
  data(){
    return {
      // Component variabler
    };
  }
}
</script>

Обратите внимание, что в части есть запятая между "kwitterBtn" и type

<br>
            <p>Vad händer?</p>
      <article>
            <form class = "userContainer">
              <div class = "div1">
                <img src="avatar/avatar-loggedin.jpg">
              </div>
                  <textarea rows = "5" cols = "50" name = "kweet_content">  </textarea>
              <p><button class = "kwitterBtn", type = "submit">Kwitter</button></p>
            </form>
    </article>
        <br>

И это было виновником всего беспорядка. После удаления запятой все было хорошо.

0
Sean2014 2 Авг 2019 в 07:36