配置nuxt3 + element-plus

  1. 安装依赖

    pnpm add element-plus
    pnpm add -D sass sass-loader unplugin-vue-components unplugin-auto-import
    
  2. 修改tsconfig.json

    // tsconfig.json
    {
      "compilerOptions": {
        // ...
        "types": ["element-plus/global"]
      }
    }
    
  3. 新建assets/scss/index.scss

    @use "element-plus/dist/index.css";
    
  4. 修改nuxt.config.ts

    import { defineNuxtConfig } from 'nuxt'
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from "unplugin-vue-components/vite";
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    
    
    const lifecycle = process.env.npm_lifecycle_event;
    
    export default defineNuxtConfig({
        // ...
        // vite plugins
        vite: {
            plugins: [
                AutoImport({
                    resolvers: [ElementPlusResolver()]
                }),
                Components({
                    dts: true,
                    resolvers: [ElementPlusResolver()]
                }),
            ],
        },
        // css
        css: ["~/assets/scss/index.scss"],
        // build
        build: {
            transpile: lifecycle === "build" ? ["element-plus"] : [],
        },
        // ...
    })
    
    
posted @ 2022-05-31 17:11  七つ一旋桜  阅读(1174)  评论(0)    收藏  举报