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

源码地址： https://github.com/xbmlz/nuxt-starter.git

安装

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文件如下

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