vue3 elementui 搜索
时间: 2025-02-12 13:25:35 浏览: 37
### 关于 Vue 3 和 Element Plus 的集成
对于 Vue 3 项目来说,官方推荐使用 **Element Plus** 而不是旧版的 Element UI。这是因为 Element Plus 已经完全支持 Vue 3 并进行了优化。
#### 安装 Element Plus
为了在 Vue 3 中引入 Element Plus,在项目的根目录执行以下命令来安装依赖包:
```bash
npm install element-plus --save
```
#### 配置 main.js 文件
接下来需要修改 `src/main.js` 来全局注册 Element Plus 组件库并应用样式表:
```javascript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 导入整个 ElementPlus 或按需加载特定组件
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus); // 注册 ElementPlus 插件
app.mount('#app');
```
#### 创建页面组件
假设要创建一个新的页面组件叫做 `HelloWorld.vue`, 可以按照下面的方式编写代码:
```html
<!-- src/components/HelloWorld.vue -->
<template>
<div class="hello">
<el-button type="primary">Primary Button</el-button> <!-- 这是一个来自 Element Plus 的按钮 -->
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
```
#### 设置路由 (可选)
如果希望设置路由导航,则可以在 `src/router/index.ts` 添加如下内容:
```typescript
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
export const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HelloWorld,
},
],
})
```
最后记得在 `main.js` 中导入这个路由器实例,并将其挂载到应用程序上:
```javascript
// src/main.js
...
import {router} from './router';
const app = createApp(App);
app.use(router).use(ElementPlus).mount('#app');
```
阅读全文
相关推荐

















