javascript - Vue.js，路由器导入模板vue文件

Question

大家好，我有一个简单的 Vue.js 项目，我正在尝试将一个 vue 模板文件导入我的 index.html 文件，而不使用 webpack 或 browserify 之类的 cli 工具。

据我了解，我需要使用称为路由器的东西才能做到这一点并在我的项目中导入一些额外的 JS。

<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

在我的 index.html 脚本标签中，我正在创建一个新对象，它引用我想要包含的导航组件。

var Settings =  httpVueLoader('Navigation.vue') ,
router = new VueRouter({
    routes:[
        { path:'/navigation', component: Navigation }
    ]
});

我希望能够只使用<navigation></navigation>index.html 文件中的标签来获取 Navigation.vue 文件中的任何代码。

我在这里的项目中有一个 codepen：https ://codepen.io/fennefoss/project/editor/ZerEod#

标签： javascriptvue.jsvuejs2

Answer 1

我认为您需要导出 Navigation.vue ，顺便说一下您的样式标签和脚本标签放在模板之外，就像这样

导航.vue：

    <template id="navigation">
        <p>Click on the Menu Icon to transform it to "X":</p>
        <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>

    </template>

    <style>
        .container {
            display: inline-block;
            cursor: pointer;
        }

        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
    </style>

    <script>
        module.exports = {
            data: function () {
                return {};
            },
            mounted: function () {
                function myFunction(x) {
                    x.classList.toggle("change");
                }
            }
        };

    </script>