ddddd

当前位置：码农之家-程序员学习> HTML5> html中引入Vue+ElementUI

html中引入Vue+ElementUI

作者：程序员11 时间：2023-06-19 人气：315 QQ交流群\邮箱:1003265987@qq.com

html中引入Vue+ElementUI

要展示的内容

注意：这里里面也可以 npm i element-ui -S，前提是必须先引入vue,

例如:

<link rel="stylesheet" href="/dist/node_modules/element-ui/lib/theme-chalk/index.css">
<script src="/dist/js/manager/vue/vue.min.js"></script>
<script src="/dist/node_modules/element-ui/lib/index.js"></script>

或者去BootCDN - Bootstrap下载对应的文件

CDN方式引入Vue.js和ElementUI

Vue官网： https://cn.vuejs.org/

ElementUI： https://element.eleme.cn/2.0/#/zh-CN/component/installation

引入时需要注意的地方：

先引入vue.js然后在引入ElementUI组件库

需要挂载app（vue的作用域）就是：<div id="#app">标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <!-- cdn引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   
</head>
<body>
<div id="app">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>

</div>

<!--cdn引入ElementUI组件必须先引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- cdn引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
            msg: ''
        }
    })
</script>


</body>
</html>

链接：https://blog.51cto.com/u_15119353/3305673

本文链接:https://www.1024dongnn.com/html5/855.html

温馨提示:

欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。