源码地址: 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
文件如下
<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/