当前位置：首页 > VUE

vue结合element实现网站

2026-02-22 03:45:52VUE

Vue 结合 Element UI 实现网站

环境准备

确保已安装 Node.js（建议版本 14+）和 npm/yarn。使用 Vue CLI 创建项目：

npm install -g @vue/cli
vue create my-project
cd my-project

安装 Element UI

通过 npm 或 yarn 安装 Element UI：

npm install element-plus
# 或
yarn add element-plus

全局引入 Element UI

在 main.js 或 main.ts 中引入 Element UI 及其样式：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入（推荐）

使用 unplugin-vue-components 和 unplugin-auto-import 实现按需引入：

安装插件：

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

在 vite.config.js 或 webpack.config.js 中配置：


// Vite 配置示例
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }


#### 基础组件使用

在 Vue 单文件组件中直接使用 Element UI 组件：
```vue
<template>
  <el-button type="primary">按钮</el-button>
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

主题定制

通过 SCSS 变量覆盖默认主题：

// styles/element-variables.scss
$--color-primary: #ff4500;

在 vite.config.js 中配置：

export default {
css: {
 preprocessorOptions: {
   scss: {
     additionalData: `@use "~/styles/element-variables.scss" as *;`,
   },
 },
},
}

布局实现

使用 Element UI 的布局组件构建页面框架：

<template>
  <el-container>
    <el-header>头部导航</el-header>
    <el-container>
      <el-aside width="200px">侧边栏</el-aside>
      <el-main>主内容区</el-main>
    </el-container>
  </el-container>
</template>

表单处理

结合 Vue 的双向绑定处理表单：

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
const form = reactive({
  name: '',
})

const onSubmit = () => {
  console.log(form)
}
</script>

路由集成

安装 Vue Router 并配置路由：

npm install vue-router@4

创建路由配置文件：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

状态管理

使用 Pinia 进行状态管理：

npm install pinia

配置 Store：

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
  },
})