vue2静态引入组件

Author： xy3
发布时间：February 2, 2024
429 views
No comments
850 words
Categories：各类教程

<html lang="zh-CN" style="height: auto;">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

    <title>测试</title>
    <script src="/static/lib/vue/vue.js"></script>
    <script src="/static/lib/vue/httpVueLoader.js"></script>
</head>

<body>
    <div id="app">
        <banner></banner>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            components: {
                'banner': httpVueLoader("/component/banner.html"),
            },
            data: {
            },
            mounted: function () {
            },
            methods: {
            },
        });
    </script>
</body>

组件部分，export default{}要改成module.exports = {}，style那边用less、stylus还是sass什么的，声明也要去掉。

<template>
    <div>测试</div>
</template>
<script>
    module.exports = {
        name: 'banner',
        components: {},
        data() {
            return {
                list: []
            }
        },
        mounted: function () {
        },
        methods: {
        }
    }
</script>
<style>
</style>

Last modification：February 2, 2024