vue组件库element-plus快速了解_vueelementplus-CSDN博客

文档说明

只想简单了解下element组件库的，可以快速写出组件
element
对vue不熟悉，并不想搭建vue项目

初始配置：通过cdn方式方式——快速开始

配置模板

1.配置html文件中，输入element_study 快速创建html文件（引入了锁定版本的element 和vue）
1.在 VSCode 中，按下 Ctrl+Shift+P (Windows) 或 Cmd+Shift+P (Mac)
2.输入 “snippets”
3.选择 “Configure User Snippets”
4.选择 “html.json” (为 HTML 文件创建代码片段)
然后将以下代码复制到 html.json 中：

{
   
   
  "Element Plus Template": {
   
   
    "prefix": "element_study",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>Element Plus 学习</title>",
      "    <!-- 使用 Element Plus 2.5.6 版本的 CSS   https://unpkg.com/browse/element-plus/-->",
      "    <link rel=\"stylesheet\" href=\"//unpkg.com/element-plus@2.5.6/dist/index.css\" />",
      "    <!-- 使用 Vue 3.4.21 版本  https://unpkg.com/browse/vue/ -->",
      "    <script src=\"//unpkg.com/vue@3.4.21\"></script>",
      "    <!-- 使用 Element Plus 2.5.6 版本的 JS -->",
      "    <script src=\"//unpkg.com/element-plus@2.5.6\"></script>",
      "</head>",
      "<body>",
      "    <div id=\"app\">",
      "        $1",
      "    </div>",
      "",
      "    <script>",
      "        const { createApp, ref } = Vue",
      "        const app = createApp({",
      "            setup() {",
      "                $2",
      "                return {",
      "                    $3",
      "                }",
      "            }",
      "        })",
      "        app.use(ElementPlus)",
      "        app.mount('#app')",
      "    </script>",
      "</body>",
      "</html>"
    ],
    "description": "创建一个包含 Vue3 和 Element Plus 的 HTML 模板"
  }
}

补充：使用tab可以切模板中的空缺位置
在这里插入图片描述
如下图，就成功使用到了vue和 element-plus的东西

icon图标

使用cdn的方式：

    <!-- 使用 Element Plus 2.5.6 版本的图标 -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <script>
  
        const {
     
      createApp, ref } = Vue
        const app = createApp({
     
     
            setup() {
     
     
                // 从图标库中导入所需图标(如按钮上有图标需要这样导入)
            const {
     
      Search, Edit } = ElementPlusIconsVue
                return {
     
     
                    Search, 
                    Edit
                }
            }
        })

            // 注册所有图标组件（ <el-icon><Edit /></el-icon> 时，可以展示成功）
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     
     
            app.component(key, component)
        }
    
        app.use(ElementPlus)
        app.mount('#app')
    </script>

2.推荐没有使用cursor的使用cursor，它是一个有ai功能的vscode

基本控件

按钮

element样式的按钮, 然后ai给了一些自定义样式的按钮

渐变按钮
悬浮特效
3D按钮等

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Plus 学习</title>
    <!-- 使用 Element Plus 2.5.6 版本的 CSS   https://unpkg.com/browse/element-plus/-->
    <link rel="stylesheet" href="//unpkg.com/element-plus@2.5.6/dist/index.css" />
    <!-- 使用 Vue 3.4.21 版本  https://unpkg.com/browse/vue/ -->
    <script src="//unpkg.com/vue@3.4.21"></script>
    <!-- 使用 Element Plus 2.5.6 版本的 JS -->
    <script src="//unpkg.com/element-plus@2.5.6"></script>
    <!-- 使用 Element Plus 2.5.6 版本的图标 -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
</head>
<body>
    <div id="app">
            <!-- 1. 不同类型的按钮 -->
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <br>
    <br>
    <!-- 2. 朴素按钮 -->
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
<br>
<br>
    <!-- 3. 圆角按钮 -->
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
<br>
<br>
    <!-- 4. 图标按钮 -->
    <el-button :icon="Search">搜索</el-button>
    <el-button type="primary" :icon=