Vue3集成Element-Plus创建系统

element-plus用来更加便利去写前端组件

官网：A Vue 3 UI Framework | Element Plus

Vue3集成Element-Plus

安装依赖

npm i element-plus -S

安装成功

卸载element-plus

npm uninstall element-plus

在main.js写入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'


  app.use(ElementPlus, {
  locale: zhCn,
})

引入element以及在里面使用

组件使用

在已有的界面里面添加网站组件的源码就可以实现相关页面的构建

Home.vue

<template>
<div>

    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>

</div>
</template>
<script setup>

</script>

样式效果

使用icon组件

安装依赖

npm install @element-plus/icons-vue

在main.js里面添加

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

  
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

<div style="margin: 50px">
  <el-icon size="20"><CircleCheck /></el-icon>
  <el-input placeholder="请输入内容" :suffix-icon="Calendar"></el-input>
  <el-input placeholder="请输入内容" :prefix-icon="Search"></el-input>
</div>

suffix-icon后缀 prefix-icon前缀

el-input使用图标要单独使用

el-icon和el-button不需要单独导入

Element-Plus主题色设置

安装依赖sass inplugin-vue-components unplugin-auto-import

npm install -D sass unplugin-vue-components unplugin-auto-import

创建index.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": ("base": #2c82ff),
    "success": ("base": #31bf00),
    "warning": ("base": #ffad00),
    "danger": ("base": #e52f2f),
    "info": ("base": #8055ff),
  )
);

import AutoImport from 'unplugin-auto-import/vite' // 自动导入vue中的组件
import Components from 'unplugin-vue-components/vite' //自动导入ui-组件 比如 element-plus等
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 对应组件库引入 ，AntDesignVueResolver

  
  //plugins里面加

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 配置elementPlus采用sass样式配置系统
        ElementPlusResolver({importStyle:"sass"})
      ],
    }),
  

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入vue中的组件
import Components from 'unplugin-vue-components/vite' //自动导入ui-组件 比如 element-plus等
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 对应组件库引入 ，AntDesignVueResolver

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 配置elementPlus采用sass样式配置系统
        ElementPlusResolver({importStyle:"sass"})
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/index.scss" as *;`,
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

主体布局

.el-dropdown {
  cursor: pointer;
}

引入小手样式

最后manger父组件，与子组件嵌套