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

从零搭建 Vue 3 + Element Plus 项目实战指南

news 来源：原创 2025/4/28 2:14:49

引言

Vue.js 是一款流行的前端框架，以其简洁的 API 和灵活的组件化开发方式深受开发者喜爱。Vue 3 作为 Vue.js 的最新版本，带来了许多新特性，如 Composition API、更好的性能优化等。而 Element Plus 是基于 Vue 3 的 UI 组件库，提供了丰富的组件和样式，能够帮助我们快速构建美观的前端界面。

本文将带你从零开始搭建一个 Vue 3 + Element Plus 的项目，涵盖项目初始化、配置、组件开发、路由管理、状态管理等核心内容。通过这篇博文，你将掌握如何使用 Vue 3 和 Element Plus 构建一个完整的前端项目。

1. 环境准备

在开始之前，确保你的开发环境已经安装了 Node.js 和 npm（Node.js 的包管理工具）。你可以通过以下命令检查是否已经安装：

node -v
npm -v

如果没有安装，可以从 Node.js 官网下载并安装。

2. 创建 Vue 3 项目

Vue 3 提供了官方的脚手架工具 Vue CLI，可以帮助我们快速创建一个 Vue 项目。如果你还没有安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

安装完成后，使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create vue3-elementplus-demo

在创建过程中，Vue CLI 会提示你选择一些配置项。你可以选择手动配置，也可以直接使用默认配置。为了演示方便，我们选择手动配置，并勾选以下选项：
• Babel：用于将 ES6+ 代码转换为兼容性更好的 ES5 代码。
• TypeScript：如果你希望使用 TypeScript 进行开发，可以勾选此项。
• Router：用于管理前端路由。
• Vuex：用于状态管理。
• CSS Pre-processors：选择你喜欢的 CSS 预处理器，如 Sass、Less 等。
• Linter / Formatter：用于代码风格检查和格式化。
配置完成后，Vue CLI 会自动安装依赖并生成项目结构。

3. 安装 Element Plus

Element Plus 是 Vue 3 的 UI 组件库，提供了丰富的组件和样式。我们可以通过 npm 安装 Element Plus：

npm install element-plus --save

安装完成后，我们需要在项目中引入 Element Plus。打开 src/main.js 文件，添加以下代码：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);

app.use(router);
app.use(store);
app.use(ElementPlus);

app.mount('#app');

这样，Element Plus 的组件和样式就已经全局引入了。

4. 配置路由

在 Vue 项目中，路由管理是非常重要的一部分。Vue Router 是 Vue 官方提供的路由管理工具，能够帮助我们实现单页面应用（SPA）的路由跳转。
在项目创建时，我们已经选择了安装 Vue Router，因此可以直接使用。打开 src/router/index.js 文件，可以看到默认的路由配置：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

在这个配置中，我们定义了两个路由：Home 和 About。你可以根据需要添加更多的路由。

5. 使用 Element Plus 组件

Element Plus 提供了丰富的 UI 组件，我们可以直接在项目中使用。下面我们以按钮组件为例，演示如何使用 Element Plus 的组件。
打开 src/views/Home.vue 文件，添加以下代码：

<template>
  <div class="home">
    <h1>Welcome to Vue 3 + Element Plus</h1>
    <el-button type="primary" @click="handleClick">Primary Button</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    handleClick() {
      this.$message('Button clicked!');
    },
  },
};
</script>

<style scoped>
.home {
  text-align: center;
  margin-top: 50px;
}
</style>

在这个例子中，我们使用了 Element Plus 的 el-button 组件，并为其绑定了一个点击事件。当按钮被点击时，会弹出一个消息提示。

6. 状态管理（Vuex）

在大型项目中，状态管理是必不可少的。Vuex 是 Vue 官方提供的状态管理工具，能够帮助我们集中管理应用的状态。
在项目创建时，我们已经选择了安装 Vuex，因此可以直接使用。打开 src/store/index.js 文件，可以看到默认的 Vuex 配置：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
  modules: {},
});

在这个配置中，我们定义了一个简单的状态 count，并提供了一个 increment 方法来增加 count 的值。
接下来，我们在 Home.vue 中使用这个状态：

<template>
  <div class="home">
    <h1>Welcome to Vue 3 + Element Plus</h1>
    <el-button type="primary" @click="handleClick">Primary Button</el-button>
    <p>Count: {{ count }}</p>
    <el-button type="success" @click="incrementCount">Increment Count</el-button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'Home',
  computed: {
    ...mapState(['count']),
  },
  methods: {
    handleClick() {
      this.$message('Button clicked!');
    },
    ...mapActions(['increment']),
    incrementCount() {
      this.increment();
    },
  },
};
</script>

<style scoped>
.home {
  text-align: center;
  margin-top: 50px;
}
</style>

在这个例子中，我们通过 mapState 和 mapActions 将 Vuex 中的状态和方法映射到组件中，并在模板中使用。

7. 样式管理

在 Vue 项目中，样式管理也是非常重要的一部分。我们可以使用 CSS 预处理器（如 Sass、Less）来编写样式，并通过 scoped 属性将样式限定在当前组件中。
在项目创建时，我们已经选择了安装 CSS 预处理器，因此可以直接使用。打开 src/views/Home.vue 文件，添加以下样式：

<style scoped lang="scss">
.home {
  text-align: center;
  margin-top: 50px;

  h1 {
    color: #42b983;
  }

  .el-button {
    margin-top: 20px;
  }
}
</style>

在这个例子中，我们使用了 Sass 语法来编写样式，并通过 scoped 属性将样式限定在当前组件中。

8. 项目打包与部署

当我们完成项目开发后，需要将项目打包并部署到服务器上。Vue CLI 提供了简单的打包命令：

npm run build

执行该命令后，Vue CLI 会将项目打包到 dist 目录中。你可以将 dist 目录中的文件上传到服务器，或者使用 Docker 等工具进行容器化部署。

9. 总结

通过本文的学习，我们从零开始搭建了一个 Vue 3 + Element Plus 的项目，涵盖了项目初始化、配置、组件开发、路由管理、状态管理等核心内容。希望这篇博文能够帮助你快速上手 Vue 3 和 Element Plus，并在实际项目中应用这些知识。
Vue 3 和 Element Plus 的结合为前端开发提供了强大的工具和丰富的组件库，能够帮助我们快速构建高质量的前端应用。如果你对 Vue 3 和 Element Plus 有更多的兴趣，建议你深入学习它们的官方文档，探索更多的功能和用法。
Happy Coding! 🚀