引入 element-plus 和 px2toviewport

引入 element-plus

安装

pnpm install element-plus @element-plus/nuxt -S
pnpm install @element-plus/icons-vue -S

新建插件

• 架构

├── plugins
│   ├── element-plus-icons.js

element-plus-icons.js 里面写入

// plugins/element-plus-icons.js
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

export default defineNuxtPlugin((nuxtApp) => {
  // 遍历ElementPlusIconsVue对象，并注册所有图标为全局组件
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    nuxtApp.vueApp.component(key, component);
  }
});

引入

• nuxt.config.js

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  // 其他配置...
  plugins: [
    "~/plugins/element-plus-icons.js", // 引入图标插件
  ],
  // 如果已经安装了@element-plus/nuxt来全局引入Element Plus，确保也配置了它
  modules: [
    "@element-plus/nuxt", // 如果需要全局引入Element Plus
  ],
  // Element Plus的配置（如果需要）
  elementPlus: {
    // 配置项...
  },
});

使用

<el-button type="primary">Primary Button</el-button>
<el-icon class="el-icon--right">
  <arrow-down />
</el-icon>

引入 px2toviewport

pnpm install postcss-px-to-viewport -S

配置 px2toviewport

在 nuxt.config.ts 中添加以下配置：

// 适配
postcss: {
    plugins: {
        'postcss-px-to-viewport': {
            viewportWidth: 1920 /** 设计稿的视口宽度 */,
            unitToConvert: 'px' /** 需要转换的单位，默认为"px" */,
            unitPrecision: 5 /** 单位转换后保留的精度 */,
            propList: ['*'] /** 能转化为vw的属性列表 */,
            viewportUnit: 'vw' /** 希望使用的视口单位 */,
            fontViewportUnit: 'vw' /** 字体使用的视口单位 */,
            selectorBlackList: [] /**  需要忽略的CSS选择器 */,
            minPixelValue: 1 /** 设置最小的转换数值 */,
            mediaQuery: true /** 媒体查询里的单位是否需要转换单位 */,
            replace: true /** 是否直接更换属性值，而不添加备用属性 */,
            exclude: undefined /** 忽略某些文件夹下的文件或特定文件 */,
            include: undefined /**  设置将只有匹配到的文件才会被转换 */,
            landscape: false /** 是否添加根据 landscapeWidth 生成的媒体查询条件 @media */,
            landscapeUnit: 'rem' /** 横屏时使用的单位 */,
            landscapeWidth: undefined /** 横屏时使用的视口宽度 */
        }
    }
}

• 使用

<style scoped lang="scss">
  /* 这样他就会自动转义 */
  .test {
    width: 192px;
    height: 192px;
    background: red;
  }
</style>