第三章：书写html组件

原创已于 2022-02-25 11:18:11 修改 · 8.8w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#1024程序员节 #sa-admin

于 2021-10-24 14:50:42 首次发布

史上最全SpringBoot系列组件专栏收录该内容

54 篇文章

订阅专栏

本文介绍了如何在HTML页面中使用Vue组件，通过httpVueLoader加载并绑定到DOM节点，同时展示了在实际项目中引入和调用Vue组件的例子。

sa-admin不仅支持vue组件，还支持html组件，在html引入vue组件，使用httpVueLoader的形式，记得使用el绑定到节点中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 所有的 css & js 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
<div id="root">
    <div>
        <el-input placeholder="目的地"></el-input>
    </div>
    <ddusers-add></ddusers-add>
</div>
<script type="text/javascript">
    let vue = new Vue({
        //一定要绑定到节点上去
        el: "#root",
        //引入组件
        components: {
            "ddusers-add": httpVueLoader('./ddusers-add.vue')
        },
        data: {
            //从url上获取参数
            id: sa.p('id', "0"),
        },
        methods: {}
    });
</script>
</body>
</html>

在导航栏中引入，找到sa-frame目录下的menu-list.js文件