文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将外部Vue模板包含到HTML文件中

问如何将外部Vue模板包含到HTML文件中
EN

Stack Overflow用户

提问于 2019-08-01 11:28:37

回答 3查看 7.2K关注 0票数 4

我正试图在本地的web服务器上建立一个有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文件已经连接到了main.js文件，所以在语句<script src="../src/main.js"></script>中包含一个app.vue文件还不够吗？

更新

这是我的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      
    }
  ]
})

vue.js

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-08-01 11:33:58

在将Vue应用程序部署到静态web服务器之前，您需要“构建”它。像.vue文件这样的文件实际上是源代码，浏览器不知道如何处理它们。

要生成部署所需的工件，请运行：

vue-cli-service build

这将将可部署的工件生成到dist文件夹中。将这些复制到您的web服务器上，您将能够加载它。

更详细的内容如下：

https://v2.vuejs.org/v2/guide/deployment.html

票数 3

Stack Overflow用户

发布于 2019-08-01 12:10:14

slutuppgift文件夹是否直接位于本地web服务器上？使用这样的结构，您需要首先编译Vue应用程序。

如果不想编译应用程序，可以使用Vue实例创建普通的html文件。在这种情况下，您可以将html文件中的VueJS与<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>链接起来。

您可以在正式文档这里中检查Vue实例示例。

票数 1

Stack Overflow用户

发布于 2019-08-02 07:36:37

原始的有问题的代码如下。

<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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57308008

复制

相似问题

问如何将外部Vue模板包含到HTML文件中
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将外部Vue模板包含到HTML文件中EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将外部Vue模板包含到HTML文件中
EN