如何在纯html文件中引入vue3和ElementPlus包括ElementPuls的icon字体图标库

element

A Vue.js 2.0 UI Toolkit for Web

项目地址：https://gitcode.com/gh_mirrors/eleme/element

免费下载资源

做前端买机车

588人浏览 · 2024-06-27 16:49:26

做前端买机车 · 2024-06-27 16:49:26 发布

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <!-- Import ElementPlus css   -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.7.6/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.prod.js"></script>
    
    <!-- ElementPlus -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <!-- ElementPlus  icon-->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
</head>
    <div id="app">
        <el-icon>
            <Plus/>
        </el-icon>
    </div>
<script>
    const {createApp, onMounted, onUnmounted, watchEffect, reactive, ref, toRefs} = Vue;
    // 动态注册 Element Plus 的图标组件
    const {ElButton, ElMessage, ElMessageBox, ElLoading, UploadProps, UploadUserFile} = ElementPlus;
    const {ElIcon} = ElementPlus

     const app = createApp({
        setup() {

        })
        
        app.component('plus', ElementPlusIconsVue.Plus)
        //要引入什么icon，就按上面一样写
        app.use(ElementPlus).mount('#app')
</script>

GitHub 加速计划 / eleme / element

下载

A Vue.js 2.0 UI Toolkit for Web

最近提交(Master分支：18 天前 )

c345bb45 1 年前

a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

沁言学术 vs Grammarly：中文学术写作与语料库本地化支持的表现剖析

Grammarly是全球写作工具，语料库以英文为主，支持基本中文检查；沁言学术是本土AI平台，语料库深度本地化，针对中文学术设计。中文学术写作：Grammarly基础语法/拼写（本地化弱），沁言学术AI生成/优化（深度支持）。语料库本地化：Grammarly通用库（英文主导），沁言学术本土库（CNKI等集成）。整体：Grammarly免费版通用，付费版高级；沁言学术免费版入门，AI付费优化。表现亮