Nuxt3 项目 nuxt.config.ts 怎么下载 并安装element-plus
时间: 2023-11-10 13:05:13 浏览: 187
nuxt-jsonapi:JSON格式
要在 Nuxt3 TypeScript 项目中使用 Element Plus,需要先安装 Element Plus 和 Vue 3:
```
npm install element-plus vue@next --save
```
然后在你的 Nuxt3 TypeScript 项目中,在 `nuxt.config.ts` 文件中添加以下内容:
```typescript
import { NuxtConfig } from '@nuxt/types';
const config: NuxtConfig = {
// ...
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.ts', ssr: false }],
};
export default config;
```
在 `plugins` 目录下创建一个新的文件 `element-plus.ts`,并添加以下内容:
```typescript
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 lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
showMessage() {
this.$message({
message: '这是一条消息',
type: 'success',
});
},
},
});
</script>
```
阅读全文