时间戳

首页 > 解决方案 > Vue - 在多页面环境中导入组件

vue.js - Vue - 在多页面环境中导入组件

问题描述

我希望在多页环境中使用 Vue.js。对于这个项目，我不能使用 webpack 或 vue.cli。我必须使用导入各种库然后使用它们的基本方法。我快到了，但我不知道如何导入组件。我假设我需要使用 require.js 但我不知道如何继续。

这是主要组件（index.html）：

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'><meta name="robots" content="noindex">
<title>Hello</title>
</head><body>

    <div id="app">
    <p>Hello this is the {{results}} app</p>

    <br /><br />

    <p>Now it's time for a component to be shown:</p>

    <app-my-accordion></app-my-accordion>

    </div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>
<script src='require.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

import MyAccordion from 'components/my-accordion.html'; // <--Problem here

    new Vue({
        el: '#app',
        components: {
            'app-my-accordion': MyAccordion
        },
        data() {
            return {
                results: null
            }
        },
        mounted() {
            axios.get("http://myApi")
                .then(response => { this.results = response.data.name; console.log(response.data.name); })
        }
    });
</script>
</body></html>

然后在我的 my-accordion.html

<template>
<div>And my child's component name is: {{results}}</div>
</template>


<script>
    export default {
        data() {
            return {
                results: null
            }
        },
        mounted: function () {
            axios.get("http://myOtherApi")
                .then(response => { this.results = response.data.name; console.log(response.data.name); })
        }
    }
</script>
</body></html>

标签： vue.jsvuejs2

解决方案

推荐阅读