当前位置：首页 > news >正文

element组件教学，基础

news 来源：原创 2025/5/10 23:05:08

这里主要讲一下使用前的准备操作

1.直接用html开发的这样引入样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Element UI Example</title>
</head>
<body>
    <!-- 在这里使用Element UI组件 -->
</body>
</html>

2.用vues的话，这样引入在main.js文件中

全局方式

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
    el: '#app',
    // 其他配置
});

在上述代码中，先通过import引入 Element UI 的样式和组件库，然后使用Vue.use(ElementUI)进行全局注册，这样在整个 Vue 项目中都可以使用 Element UI 的组件。如果只是在某个特定组件内使用 Element UI 组件，也可以在该组件的<script>中局部引入相关组件，示例代码如下：（感觉比较麻烦，不建议这样用）

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>
<script>
import { Button } from 'element-ui';
export default {
    components: {
        ElButton: Button
    }
};
</script>