vue3使用CDN方式加载element ui组件库

147 阅读1分钟

代码:

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <!-- 引入vue -->
    <script src="src/vue.global.js"></script>

    <!-- 引入element ui js -->
    <script src="src/index.full.js"></script>

    <!-- 引入element ui css -->
    <link rel="stylesheet" href="src/index.css">
    
    <title>Element Plus demo</title>
  </head>

  <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>

        //应用配置
        const App = {
            data() {
                return {
                    message: "提交",
                };
            },
        };

        //初始化APP
        const app = Vue.createApp(App);
        //使用element插件
        app.use(ElementPlus);
        //挂载到dom上
        app.mount("#app");

    </script>

  </body>
</html>

注意: 上述代码中的引入文件为下载后的本地文件,也可以使用CDN方式引入。先引用vue,再引用element ui的js和css。通过 CDN 使用 Vue 时,不涉及“构建步骤”。这使得设置更加简单,并且可以用于增强静态的 HTML 或与后端框架集成。但是,你将无法使用单文件组件 (SFC) 语法。详情请访问element ui官网:element-plus.org/zh-CN/