vue3怎么使用element-plus
时间: 2023-10-09 22:04:45 浏览: 41
使用 Element Plus 需要先安装 Element Plus 包和它的样式库。可以通过 npm 命令来安装:
```bash
npm install element-plus
```
然后,在你的项目中 main.js 中引入 Element Plus:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
```
在上面的代码中,我们使用 `import` 语句引入了 Element Plus 包和其样式库,并在 `createApp` 函数中调用了 `use` 方法来使用 Element Plus。
现在,你就可以在你的组件中使用 Element Plus 的组件了。例如,在你的组件模板中添加一个输入框和一个按钮:
```vue
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<el-button @click="handleClick">按钮</el-button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleClick() {
console.log(this.inputValue)
}
}
}
</script>
```
这里的 `el-input` 和 `el-button` 就是 Element Plus 提供的两个组件。