nuxtjs + scss + unocss + pinia + i18n + 引入本地化字体 新建项目

1、通过命令行报错的，直接下载压缩包

pnpm dlx nuxi init <project-name>

压缩包地址：https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3

2、安装插件

1、安装unocss

pnpm install --save-dev @unocss/nuxt unocss

# nuxt.config.js

  modules: [
    '@unocss/nuxt'
  ],

根目录下unocss.config.ts

import type { UserShortcuts } from 'unocss'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'
import { SHORTCUTS, THEME } from './constants/unocss'

export default defineConfig({
  shortcuts: SHORTCUTS as UserShortcuts<any>,
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  theme: {
    colors: {
      primary: THEME.PRIMARY,
    },
  },
})

根目录下新建constants/unocss.ts

export const SHORTCUTS = [
  ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
  ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ['full', 'h-screen w-screen overflow-hidden bg-cover bg-center'],
  ['position-center', 'absolute left-1/2 top-1/2 text-white -translate-x-1/2 -translate-y-1/2'],
]

export const THEME = {
  PRIMARY: '#00dfb9',
}

2、自动引入ref标签等

pnpm i unplugin-auto-import

# nuxt.config.ts
import AutoImport from 'unplugin-auto-import/vite'

  vite: {
    plugins: [
      AutoImport({
        // 可以自定义文件生成的位置，默认是根目录下，使用 ts 的建议放 src 目录下
        dts: 'src/auto-imports.d.ts',
        imports: ['vue'],
        // 解决 eslint 报错问题
        eslintrc: {
          enabled: true
        }
      })
    ]
  },

3、安装i18n插件

pnpm install @nuxtjs/i18n

// nuxt.config.ts 配置
  // 模块配置
  modules: [
    '@nuxtjs/i18n',
    '@unocss/nuxt',
    '@pinia/nuxt',
  ],

  // 国际化配置
  i18n: {
    // Module Options
    lazy: true,
    langDir: 'locales',

    strategy: 'prefix_except_default',
    locales: [
      {
        code: 'en',
        iso: 'en',
        name: 'English',
        file: 'en.yml'
      },
      {
        code: 'zh',
        iso: 'zh',
        name: 'Chinese',
        file: 'zh.yml'
      }
    ],
    defaultLocale: 'zh'
  },

根目录新建 i18n/locales 文件夹，里面放入对应的en.yml，zh.yml文件

4、引入本地化字体，需要修改这几个文件

# font.css
/* 定义 HarmonyOS Sans SC Black */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/fonts/HarmonyOS_Sans_SC_Black.ttf') format('truetype');
  font-weight: 900; /* Black 对应的权重 */
  font-style: normal;
  font-display: swap;
}

/* 定义 HarmonyOS Sans SC Bold */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/fonts/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
  font-weight: 700; /* Bold 对应的权重 */
  font-style: normal;
  font-display: swap;
}

/* 定义 HarmonyOS Sans SC Medium */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
  font-weight: 500; /* Medium 对应的权重 */
  font-style: normal;
  font-display: swap;
}

/* 定义 HarmonyOS Sans SC Regular */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400; /* Regular 对应的权重 */
  font-style: normal;
  font-display: swap;
}

/* 定义 HarmonyOS Sans SC Light */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/fonts/HarmonyOS_Sans_SC_Light.ttf') format('truetype');
  font-weight: 300; /* Light 对应的权重 */
  font-style: normal;
  font-display: swap;
}

/* 定义 HarmonyOS Sans SC Thin */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/fonts/HarmonyOS_Sans_SC_Thin.ttf') format('truetype');
  font-weight: 100; /* Thin 对应的权重 */
  font-style: normal;
  font-display: swap;
}

  // 全局 CSS 文件配置
  css: [
    'element-plus/dist/index.css',
    '~/styles/common.scss',
    '/public/fonts.css'
  ],

// 使用
font-family: 'HarmonyOS Sans SC', 'Open Sans', sans-serif;