资源

图片

全局公共

全局公共图片存放在 /src/assets/images/ 目录下，可自行新建文件夹分类管理。

局部私有

局部私有图片建议采用就近原则，你可以在需要的模块文件夹下建立一个 images 文件夹，专门用于存放局部私有图片。

样式

全局公共

全局公共样式存放在 /src/assets/styles/ 目录下，可自行新建文件，并在 /src/main.ts 中引入即可。

此目录下还有一个特殊目录，即 /src/assets/styles/resources/ ，这是全局 SCSS 资源目录，你可以在该目录下编写变量、函数、混合等支持 SCSS 特性的代码。

局部私有

基于 SFC 组件规范，局部私有样式建议直接在 .vue 文件中编写，模板集成了 UnoCSS / PostCSS / SCSS 方案，可选择自己适合的方案。更多单文件组件 CSS 功能请参考这里。

UnoCSS

<template>
  <div class="flex flex-1 flex-col select-none text-center all:transition-400">
    <div class="ma">
      <div class="animate-bounce-alt animate-duration-1s animate-count-infinite text-5xl fw100">
        UnoCSS
      </div>
    </div>
  </div>
</template>

PostCSS

模板内置了 postcss-nested 插件，可实现接近于 SCSS 的写法和特性。

<style scoped>
.phone {
  &_title {
    width: 500px;
    @media (max-width: 500px) {
      width: auto;
    }
    body.is_dark & {
      color: white;
    }
  }
  img {
    display: block;
  }
}
</style>

SCSS

<style lang="scss" scoped>
$width: 500px;

.phone {
  &_title {
    width: $width;
    @media (max-width: $width) {
      width: auto;
    }
    body.is_dark & {
      color: white;
    }
  }
  img {
    display: block;
  }
}
</style>

组件

全局公共

说明

全局公共组件在使用时，无需手动引入，框架会在你使用时自动引入，该特性由 unplugin-vue-components 提供支持。

全局公共组件存放在 /src/components/ 目录下，每个组件按文件夹进行区分。

每个组件的文件夹内至少保留一个文件名为 index.vue 的组件入口（可参考 SvgIcon 组件），文件夹名称即为组件名。

推荐使用 pnpm new 指令进行组件生成，详细可查看《代码文件自动生成》。

局部私有

局部私有组件建议采用就近原则，你可以在需要的模块文件夹下建立一个 components 文件夹，专门用于存放局部私有组件。