引言
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! 🚀
