Nuxt3 项目怎么下载element-plus
时间: 2023-07-30 20:11:00 浏览: 100
element-plus.rar
要在 Nuxt3 项目中使用 Element Plus,需要先安装 Element Plus 和 Vue 3:
```
npm install element-plus vue@next --save
```
然后在你的 Nuxt3 项目中,在 `nuxt.config.js` 文件中添加以下内容:
```js
export default {
// ...
head: {
// ...
script: [
{
src: 'https://unpkg.com/vue@next',
type: 'text/javascript',
body: true,
},
],
},
css: [
'element-plus/theme-chalk/el-icon.css',
'element-plus/theme-chalk/index.css',
],
plugins: [{ src: '~/plugins/element-plus.js', ssr: false }],
};
```
在 `plugins` 目录下创建一个新的文件 `element-plus.js`,并添加以下内容:
```js
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
export default function (context, inject) {
const app = createApp(context.app);
app.use(ElementPlus);
context.app = app;
inject('message', ElementPlus.ElMessage);
}
```
现在你可以在项目中使用 Element Plus 了,例如:
```vue
<template>
<el-button @click="showMessage">显示消息</el-button>
</template>
<script>
export default {
methods: {
showMessage() {
this.$message({
message: '这是一条消息',
type: 'success',
});
},
},
};
</script>
```
阅读全文