{"id":1713,"date":"2025-09-02T10:27:00","date_gmt":"2025-09-02T02:27:00","guid":{"rendered":"https:\/\/zero-zl.cn\/?p=1713"},"modified":"2025-09-03T16:45:32","modified_gmt":"2025-09-03T08:45:32","slug":"02-%e4%bd%bf%e7%94%a8vue3%e9%9b%86%e6%88%90element-plus%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%b8%80%e4%b8%aa%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e7%9a%84%e9%a1%b5%e9%9d%a2%e6%a1%86%e6%9e%b6","status":"publish","type":"post","link":"https:\/\/zero-zl.cn\/index.php\/2025\/09\/02\/02-%e4%bd%bf%e7%94%a8vue3%e9%9b%86%e6%88%90element-plus%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%b8%80%e4%b8%aa%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e7%9a%84%e9%a1%b5%e9%9d%a2%e6%a1%86%e6%9e%b6\/","title":{"rendered":"02. \u4f7f\u7528Vue3\u96c6\u6210Element-Plus\u5feb\u901f\u642d\u5efa\u4e00\u4e2a\u7ba1\u7406\u7cfb\u7edf\u7684\u9875\u9762\u6846\u67b6"},"content":{"rendered":"\n

Element-Plus\u7b80\u4ecb<\/h2>\n\n\n\n

Element-Plus\u662f\u4e00\u5957\u524d\u7aefUI\u6846\u67b6\uff0c\u53ef\u4ee5\u901a\u8fc7\u5b83\u5feb\u901f\u5b9e\u73b0\u7cbe\u7f8e\u7684\u9875\u9762\u6837\u5f0f
\u5b98\u7f51\uff1ahttps:\/\/element-plus.org<\/a>
\u56fd\u5185\u955c\u50cf\uff1ahttps:\/\/cn.element-plus.org\/<\/a><\/p>\n\n\n\n

Vue3\u96c6\u6210Element-Plus<\/h2>\n\n\n\n

\u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n

npm  i element-plus -S<\/code><\/pre>\n\n\n\n
\u5b89\u88c5\u5b8c\u540e\u5728package.json\u91cc\u4f1a\u81ea\u52a8\u51fa\u73b0element-plus\u7248\u672c<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u5b89\u88c5\u7684\u6587\u4ef6\u5728node_modules\u7684element-plus\u91cc<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u5728main.js\u91cc\u5f15\u5165<\/p>\n\n\n\n
import ElementPlus from 'element-plus'\nimport 'element-plus\/dist\/index.css'\nimport zhCn from 'element-plus\/es\/locale\/lang\/zh-cn'\n\napp.use(ElementPlus, { locale: zhCn })<\/code><\/pre>\n\n\n\n
\u6d4b\u8bd5Element-Plus\u7ec4\u4ef6<\/h2>\n\n\n\n
\u5728Home.vue\u91cc\u4f7f\u7528\u5b98\u65b9\u7684\u6309\u94ae\u7ec4\u4ef6<\/p>\n\n\n\n
    <el-button>Default<\/el-button>\n    <el-button type=\"primary\">Primary<\/el-button>\n    <el-button type=\"success\">Success<\/el-button>\n    <el-button type=\"info\">Info<\/el-button>\n    <el-button type=\"warning\">Warning<\/el-button>\n    <el-button type=\"danger\">Danger<\/el-button><\/code><\/pre>\n\n\n\n
Home.vue\u6d4b\u8bd5\u5185\u5bb9<\/p>\n\n\n\n
<template>\n  <div>\n    <el-button>Default<\/el-button>\n    <el-button type=\"primary\">Primary<\/el-button>\n    <el-button type=\"success\">Success<\/el-button>\n    <el-button type=\"info\">Info<\/el-button>\n    <el-button type=\"warning\">Warning<\/el-button>\n    <el-button type=\"danger\">Danger<\/el-button>\n\n    <div>\n      <el-icon size=\"25\" color=\"green\"><Connection \/><\/el-icon>\n\n      <el-input placeholder=\"Placeholder\" :suffix-icon=\"Calendar\" :prefix-icon=\"Search\"><\/el-input>\n\n      <el-button type=\"primary\" :icon=\"Search\">\u6309\u94ae<\/el-button>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { Calendar, Search, Connection } from \"@element-plus\/icons-vue\";\n<\/script>\n<\/code><\/pre>\n\n\n\n
\u5168\u5c40\u4f7f\u7528icon<\/h2>\n\n\n\n
\u5b89\u88c5\u4f9d\u8d56\uff0c\u6ce8\u518c\u6240\u6709\u56fe\u6807<\/p>\n\n\n\n
npm install @element-plus\/icons-vue<\/code><\/pre>\n\n\n\n
\u5728main.js\u91cc\u5f15\u5165<\/p>\n\n\n\n
import * as ElementPlusIconsVue from '@element-plus\/icons-vue'\n\nfor (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n    app.component(key, component)\n}<\/code><\/pre>\n\n\n\n
el-input\uff1a\u5f53\u4f60\u5728\u8f93\u5165\u6846\u7ec4\u4ef6\u91cc\u4f7f\u7528\u56fe\u6807\uff0c\u9700\u8981\u5355\u72ec\u5bfc\u5165\u56fe\u6807<\/strong>
el-icon\u3001el-button\uff1a\u6309\u94ae\u6216\u56fe\u8868\u7ec4\u4ef6\u91cc\uff0c\u4e0d\u9700\u8981\u5355\u72ec\u5bfc\u5165\u56fe\u6807<\/strong><\/p>\n\n\n\n
<el-input placeholder=\"Placeholder\" :suffix-icon=\"Calendar\" :prefix-icon=\"Search\"><\/el-input>\n\nimport {Calendar, Search} from \"@element-plus\/icons-vue\";<\/code><\/pre>\n\n\n\n
Element-Plus\u4e3b\u9898\u8272\u8bbe\u7f6e<\/h2>\n\n\n\n
\u5b89\u88c5\u4f9d\u8d56sass\u3001unplugin-vue\u3001components\u3001unplugin-auto-import<\/p>\n\n\n\n
npm install -D sass unplugin-vue components unplugin-auto-import<\/code><\/pre>\n\n\n\n
\u914d\u7f6eindex.scss<\/p>\n\n\n\n
@forward \"element-plus\/theme-chalk\/src\/common\/var.scss\" with (\n  $colors: (\n    \"primary\": (\"base\": #2c82ff),\n    \"success\": (\"base\": #31bf00),\n    \"warning\": (\"base\": #ffad00),\n    \"danger\": (\"base\": #e52f2f),\n    \"info\": (\"base\": #8055ff),\n  )\n);<\/code><\/pre>\n\n\n\n
\u914d\u7f6evite.config.js<\/p>\n\n\n\n
import AutoImport from 'unplugin-auto-import\/vite'\nimport Components from 'unplugin-vue-components\/vite'\nimport { ElementPlusResolver } from 'unplugin-vue-components\/resolvers'\n\n\n  plugins: [\n    vue(),\n    vueDevTools(),\n    \/\/element-plus\u6309\u9700\u5bfc\u5165\n      AutoImport({\n          resolvers: [ElementPlusResolver()],\n      }),\n      Components({\n          resolvers: [\n          \/\/\u914d\u7f6eelementPlus\u91c7\u7528sass\u6837\u5f0f\u914d\u7f6e\u7cfb\u7edf\n          ElementPlusResolver({importStyle: 'sass'})\n          ],\n      }),\n  ],\n  css: {\n    preprocessorOptions: {\n      scss: {\n        additionalData: `@use \"@\/assets\/css\/index.scss\" as *;`,\n      },\n    },\n  },<\/code><\/pre>\n\n\n\n
\u5b89\u88c5element\u63d2\u4ef6<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u642d\u5efa\u540e\u53f0\u57fa\u672c\u6846\u67b6<\/h2>\n\n\n\n
\u6846\u67b6\u5e03\u5c40\u5206\u6790<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u914d\u7f6e\u5934\u90e8\u533a\u57df<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
views\/Manager.vue<\/p>\n\n\n\n
    <!--\u5934\u90e8\u533a\u57df\u5f00\u59cb-->\n    <div style=\"height: 60px; display: flex;\">\n      <div style=\"width: 240px; display: flex; align-items: center; padding-left: 20px; background-color: #3a456b\">\n        <img style=\"width: 40px; height: 40px; border-radius: 50%;\" src=\"@\/assets\/imgs\/logo.png\" alt=\"\">\n        <span style=\"font-size: 20px; font-weight: bold; color: #f1f1f1; margin-left: 5px;\">\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf<\/span>\n      <\/div>\n      <div style=\"flex: 1; display: flex; align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd\">\n        \u9996\u9875 \/ \u6570\u636e\u5206\u6790\n      <\/div>\n      <div style=\"width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd\">\n        <el-dropdown>\n          <div style=\" display: flex; align-items: center;\">\n            <img style=\"width: 40px; height: 40px ;border-radius: 50%\" src=\"https:\/\/cube.elemecdn.com\/3\/7c\/3ea6beec64369c2642b92c6726f1epng.png\" alt=\"\">\n            <span style=\"margin-left: 5px\">\u7ba1\u7406\u5458<\/span>\n          <\/div>\n          <template #dropdown>\n            <el-dropdown-menu>\n              <el-dropdown-item>\u4e2a\u4eba\u4e2d\u5fc3<\/el-dropdown-item>\n              <el-dropdown-item>\u4fee\u6539\u5bc6\u7801<\/el-dropdown-item>\n              <el-dropdown-item>\u9000\u51fa\u767b\u5f55<\/el-dropdown-item>\n            <\/el-dropdown-menu>\n          <\/template>\n        <\/el-dropdown>\n      <\/div>\n    <\/div>\n    <!--\u5934\u90e8\u533a\u57df\u7ed3\u675f--><\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u5bfc\u822a\u680f\u83dc\u5355<\/h2>\n\n\n\n
views\/Manager.vue<\/p>\n\n\n\n
    <!--\u5185\u5bb9\u533a\u57df\u5f00\u59cb-->\n    <div style=\"display: flex ;\">\n      <!--\u83dc\u5355\u533a\u57df\u5f00\u59cb-->\n      <div style=\"width: 240px;\">\n        <el-menu router :default-openeds=\"['1']\" :default-active=\"router.currentRoute.value.path\" style=\" min-height: calc(100vh - 60px)\">\n          <el-menu-item index=\"\/manager\/home\">\n            <el-icon><House \/><\/el-icon>\n            <span>\u9996\u9875<\/span>\n          <\/el-menu-item>\n          <el-sub-menu index=\"1\">\n            <template #title>\n              <el-icon><Location \/><\/el-icon>\n              <span>\u6570\u636e\u7ba1\u7406<\/span>\n            <\/template>\n            <el-menu-item index=\"\/manager\/about\">\u5173\u4e8e\u6570\u636e<\/el-menu-item>\n          <\/el-sub-menu>\n        <\/el-menu>\n      <\/div>\n      <!--\u83dc\u5355\u533a\u57df\u7ed3\u675f-->\n\n      <!--\u6570\u636e\u6e32\u67d3\u533a\u57df\u5f00\u59cb-->\n\n      <!--\u6570\u636e\u6e32\u67d3\u533a\u57df\u7ed3\u675f-->\n    <\/div>\n    <!--\u5185\u5bb9\u533a\u57df\u7ed3\u675f--><\/code><\/pre>\n\n\n\n
\u4e3b\u4f53\u533a\u57df<\/h2>\n\n\n\n
      <!--\u6570\u636e\u6e32\u67d3\u533a\u57df\u5f00\u59cb-->\n      <div style=\"flex: 1; width: 0; padding: 10px; background-color: #f2f4ff\">\n        <router-view \/>\n      <\/div>\n      <!--\u6570\u636e\u6e32\u67d3\u533a\u57df\u7ed3\u675f--><\/code><\/pre>\n\n\n\n
\u5168\u90e8\u4ee3\u7801<\/h2>\n\n\n\n
views\/Manager.vue<\/p>\n\n\n\n
<template>\n  <div>\n    <!--\u5934\u90e8\u533a\u57df\u5f00\u59cb-->\n    <div style=\"height: 60px; display: flex;\">\n      <div style=\"width: 240px; display: flex; align-items: center; padding-left: 20px; background-color: #3a456b\">\n        <img style=\"width: 40px; height: 40px; border-radius: 50%;\" src=\"@\/assets\/imgs\/logo.png\" alt=\"\">\n        <span style=\"font-size: 20px; font-weight: bold; color: #f1f1f1; margin-left: 5px;\">\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf<\/span>\n      <\/div>\n      <div style=\"flex: 1; display: flex; align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd\">\n        \u9996\u9875 \/ \u6570\u636e\u5206\u6790\n      <\/div>\n      <div style=\"width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd\">\n        <el-dropdown>\n          <div style=\" display: flex; align-items: center;\">\n            <img style=\"width: 40px; height: 40px ;border-radius: 50%\" src=\"https:\/\/cube.elemecdn.com\/3\/7c\/3ea6beec64369c2642b92c6726f1epng.png\" alt=\"\">\n            <span style=\"margin-left: 5px\">\u7ba1\u7406\u5458<\/span>\n          <\/div>\n          <template #dropdown>\n            <el-dropdown-menu>\n              <el-dropdown-item>\u4e2a\u4eba\u4e2d\u5fc3<\/el-dropdown-item>\n              <el-dropdown-item>\u4fee\u6539\u5bc6\u7801<\/el-dropdown-item>\n              <el-dropdown-item>\u9000\u51fa\u767b\u5f55<\/el-dropdown-item>\n            <\/el-dropdown-menu>\n          <\/template>\n        <\/el-dropdown>\n      <\/div>\n    <\/div>\n    <!--\u5934\u90e8\u533a\u57df\u7ed3\u675f-->\n\n    <!--\u5185\u5bb9\u533a\u57df\u5f00\u59cb-->\n    <div style=\"display: flex ;\">\n      <!--\u83dc\u5355\u533a\u57df\u5f00\u59cb-->\n      <div style=\"width: 240px;\">\n        <el-menu router :default-openeds=\"['1']\" :default-active=\"router.currentRoute.value.path\" style=\" min-height: calc(100vh - 60px)\">\n          <el-menu-item index=\"\/manager\/home\">\n            <el-icon><House \/><\/el-icon>\n            <span>\u9996\u9875<\/span>\n          <\/el-menu-item>\n          <el-sub-menu index=\"1\">\n            <template #title>\n              <el-icon><Location \/><\/el-icon>\n              <span>\u6570\u636e\u7ba1\u7406<\/span>\n            <\/template>\n            <el-menu-item index=\"\/manager\/about\">\u5173\u4e8e\u6570\u636e<\/el-menu-item>\n          <\/el-sub-menu>\n        <\/el-menu>\n      <\/div>\n      <!--\u83dc\u5355\u533a\u57df\u7ed3\u675f-->\n\n      <!--\u6570\u636e\u6e32\u67d3\u533a\u57df\u5f00\u59cb-->\n      <div style=\"flex: 1; width: 0; padding: 10px; background-color: #f2f4ff\">\n        <router-view \/>\n      <\/div>\n      <!--\u6570\u636e\u6e32\u67d3\u533a\u57df\u7ed3\u675f-->\n    <\/div>\n    <!--\u5185\u5bb9\u533a\u57df\u7ed3\u675f-->\n  <\/div>\n<\/template>\n\n<script setup>\n\nimport router from \"@\/router\/index.js\";\n<\/script>\n\n\n<style>\n.el-menu {\n  background-color: #3a456b;\n  border: none;\n}\n.el-sub-menu__title{\n  color: #ddd;\n  background-color: #3a456b;\n}\n.el-menu-item{\n  height: 50px;\n  color: #ddd;\n}\n.el-menu .is-active{\n  background-color: #537bee;\n  color: #fff;\n}\n.el-sub-menu__title:hover{\n  background-color: #3a456b;\n}\n.el-menu-item:not(.is-active):hover{\n  background-color: #7a9fff;\n  color: #333;\n}\n.el-dropdown{\n  cursor:  pointer;\n}\n.el-tooltip__trigger{\n  outline: none;\n}\n.el-menu--inline .el-menu-item{\n  padding-left: 50px !important\n}\n<\/style><\/code><\/pre>\n\n\n\n
views\/Home.vue<\/p>\n\n\n\n
<template>\n  <div>\n    <div class=\"card\" style=\"margin-bottom: 5px\">\n      <el-input style=\"width: 260px; margin-right: 5px;\" v-model=\"data.name\" placeholder=\"\u8bf7\u8f93\u5165\u540d\u79f0\u67e5\u8be2\" :prefix-icon=\"Search\"><\/el-input>\n      <el-button type=\"primary\">\u67e5\u8be2<\/el-button>\n    <\/div>\n    <div class=\"card\" style=\"margin-bottom: 5px\">\n      <el-button type=\"danger\">\u6279\u91cf\u5220\u9664<\/el-button>\n      <el-button type=\"primary\">\u65b0 \u589e<\/el-button>\n      <el-button type=\"success\">\u6279\u91cf\u5bfc\u5165<\/el-button>\n      <el-button type=\"info\">\u6279\u91cf\u5bfc\u51fa<\/el-button>\n    <\/div>\n    <div class=\"card\" style=\"margin-bottom: 5px\">\n      <el-table :data=\"data.tableData\" style=\"width: 100%\" :header-cell-style=\"{ color: '#333',backgroundColor: '#eaf4ff' }\">\n        <el-table-column type=\"selection\" width=\"55\" \/>\n        <el-table-column prop=\"name\" label=\"\u540d\u79f0\" width=\"180\" \/>\n        <el-table-column prop=\"phone\" label=\"\u7535\u8bdd\" \/>\n        <el-table-column prop=\"address\" label=\"\u5730\u5740\" width=\"180\" \/>\n      <\/el-table>\n    <\/div>\n    <div class=\"card\" style=\"margin-bottom: 5px\">\n      <el-pagination\n          v-model:current-page=\"data.pageNumber\"\n          :page-size=\"data.pageSize\"\n          layout=\"total, prev, pager, next\"\n          :total=\"data.total\"\n      \/>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { reactive } from \"vue\";\nimport {Search} from \"@element-plus\/icons-vue\";\n\nconst data = reactive({\n  name: null,\n  pageNumber: 1,\n  pageSize: 5,\n  total: 6,\n  tableData: [\n      {name: \"\u6e29\u8fea\", phone: \"154826\", address: \"\u8499\u5fb7\u897f\u98ce\u5927\u6559\u5802\"},\n      {name: \"\u949f\u79bb\", phone: \"846136\", address: \"\u7483\u6708\"},\n      {name: \"\u96f7\u7535\u5f71\", phone: \"516238\", address: \"\u7a3b\u59bb\u5e55\u5e9c\"},\n      {name: \"\u7eb3\u897f\u8fbe\", phone: \"217863\", address: \"\u987b\u5f25\u51c0\u5584\u5bab\"},\n      {name: \"\u8299\u5b81\u5a1c\", phone: \"136874\", address: \"\u67ab\u4e39\u5927\u6b4c\u5267\u9662\"},\n      {name: \"\u4eca\u6c50\", phone: \"346335\", address: \"\u745d\u9647\u4eca\u5dde\u8fb9\u5ead\"}\n  ]\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n
router\/index.js<\/p>\n\n\n\n
import { createRouter, createWebHistory } from 'vue-router'\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: [\n    { path: '\/manager', component: import('..\/views\/Manager.vue'),\n      children: [\n        { path: 'home', component: import('..\/views\/Home.vue')},\n        { path: 'about', component: import('..\/views\/About.vue'),},\n      ]\n    },\n    { path: '\/notFound', component: import('..\/views\/404.vue'),},\n    { path: '\/:pathMatch(.*)', redirect: '\/notFound'}\n  ],\n})\n\nexport default router\n<\/code><\/pre>\n\n\n\n
assets\/css\/global.css<\/p>\n\n\n\n
*{\n    box-sizing: border-box;\n}\n\nbody{\n    margin: 0;\n    padding: 0;\n    color: #333;\n    font-size: 14px;\n}\n\na{\n    text-decoration: none;\n}\n\n.card{\n    background-color: white;\n    padding: 10px;\n    border-radius: 5px;\n    box-shadow: 0 0 8px rgba(0,0,0, .12);\n}<\/code><\/pre>\n\n\n\n
\u6700\u7ec8\u6548\u679c<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"
Element-Plus\u7b80\u4ecb Element-Plus\u662f\u4e00\u5957\u524d\u7aefUI\u6846\u67b6\uff0c\u53ef\u4ee5\u901a\u8fc7\u5b83\u5feb\u901f\u5b9e\u73b0\u7cbe\u7f8e\u7684\u9875\u9762\u6837\u5f0f\u5b98\u7f51 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114,102],"tags":[],"class_list":["post-1713","post","type-post","status-publish","format-standard","hentry","category-spring-boot3vue3","category-102"],"_links":{"self":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts\/1713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1713"}],"version-history":[{"count":15,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts\/1713\/revisions"}],"predecessor-version":[{"id":1745,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/posts\/1713\/revisions\/1745"}],"wp:attachment":[{"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zero-zl.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}