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/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="https://unpkg/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
    <script src="https://unpkg/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn/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文件

访问页面可以看到已经访问成功 

更多推荐

第三章:书写html组件