django+element-plus+vue3使用CDN方式使用icon的方法

轻编程

已于 2022-08-29 11:55:34 修改

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： vue.js elementui javascript

于 2022-08-29 11:53:26 首次发布

本文链接：https://blog.csdn.net/weixin_41861301/article/details/126582087

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static "bayke_admin/css/index.css" %}">
    <script src="//unpkg.com/vue@3"></script>
    <script src="{% static "bayke_admin/js/index.full.js" %}"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
</head>
<body>
    <div id="app">
        {% block content %}
            {$ message $}
            <el-button type="primary">
                <el-icon>
                    <element-plus>
                    </element-plus>
                </el-icon>
                Primary
            </el-button>
            
            <span>
            <el-button type="primary" icon="Edit" circle />
            </span>
            <el-button icon="Search" circle /> 
        {% endblock %}  
    </div>
    
    <script>

        const App = {
            delimiters: ['{$', '$}'],
            data() {
                return {
                    message: "Hello Element Plus",
                };
            },
        };
        const app = Vue.createApp(App);
        for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
            app.component(name, comp);
        }
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>

在Django中使用vue会有模板语法上的冲突，我们选择修改vue的默认渲染语法为{$ $}，这样就不会冲突！

element-plus+vue3使用CDN方式使用icon的方法,注意还要配合相关字体才可以！