cdn方式引入element-plus icon

一、cdn方式使用element-plus的icon

1、首先引入 vue3 element-plus 还有 element-plus icon js包

    <script src="{$Think.HTML_STATIC}/xxx/vue/dist/vue.global.js"></script>
    <link href="{$Think.HTML_STATIC}/xxx/element-plus/dist/index.css" rel="stylesheet">
    <script src="{$Think.HTML_STATIC}/xxx/element-plus/dist/index.full.js"></script>
    <script src="{$Think.HTML_STATIC}/xxx/element-plus/dist/index.iife.min.js"></script>
    <script src="{$Think.HTML_STATIC}/xxxx/element-plus/es/locale/lang/zh-cn.js"></script>

2、声明vue3的一些公共方法

 	// 此页面为Vue3 不熟悉Vue3禁止复制粘贴使用
    // ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
    // reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换
    // 推荐一种写法：只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担

    // 公共写法 start
    const ref = Vue.ref;
    const reactive = Vue.reactive;
    const toRefs = Vue.toRefs;
    const ElMessage = ElementPlus.ElMessage 
    const baseUrl = "/admin.php/xxxx";
    // const ArrowRight = ElementPlusIconsVue.ArrowRight;
    // 公共写法end

3.在set up里面return出

 //下面是setup
    const App = {
        setup() { // 传说中的setup
            Vue.onMounted(async () => {
                console.log('mouted生命周期执行了')
                tableDataBox.loading = true;
                await getData()
                const treeData = XEUtils.toArrayTree(tableDataBox.tableData, {
                    parentKey: "pid"
                })
                toColTreeData(treeData)
            });
            return { // 返回给模板，否则模板访问不到。这里返回的是对象。
                sels,// 列表选中列
                total, // 总数
                page, // 当前分页
                limit, // 每页条数
                tableData, // 表格数据
                form,
                demo1,
                check1ChangeEvent,
                check2ChangeEvent,
                check3ChangeEvent,
                check4ChangeEvent,
                rowspanMethod,
                getData,
                tableDataBox,
                ...toRefs(ElementPlusIconsVue)

            }
        },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, { locale: ElementPlusLocaleZhCn, size: 'default' }).use(VXETable).use(ElementPlusIconsVue);
    app.mount("#app");

上面的 …toRefs(ElementPlusIconsVue)就是把所有的图标暴露出来

4、代码里面使用

<el-breadcrumb style="line-height:35px" :separator-icon="ArrowRight">
    <el-breadcrumb-item>xxx</el-breadcrumb-item>
     <el-breadcrumb-item>xxx</el-breadcrumb-item>
 </el-breadcrumb>

上面的:separator-icon="ArrowRight"就是正常的使用了