【Nuxt3学习】4. 集成 element-plus

源码地址： github.com/xbmlz/nuxt-…

安装

pnpm add -D sass element-plus @element-plus/icons-vue unplugin-vue-components unplugin-auto-import

使用

新增assets/scss/index.scss文件，添加如下内容

@use "element-plus/dist/index.css";

修改nuxt.config.ts如下

import { defineNuxtConfig } from "nuxt";

const lifecycle = process.env.npm_lifecycle_event;

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  //css
  css: ["~/assets/scss/index.scss"],
  // build
  build: {
    transpile: lifecycle === "build" ? ["element-plus"] : [],
  },
  // build modules
  buildModules: ["nuxt-windicss"],
});

修改pages/index.vue文件如下

<template>
  <div>
    <h1 class="text-red-600">Index Page</h1>
    <Icon icon="mdi-light:home" />
    <el-button class="m-4" @click="hello">Hello</el-button>
  </div>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import { ElButton } from "element-plus";
</script>

<style scoped></style>

浏览器打开 http://localhost:3000/