全局资源

图片

框架用到的图片资源都放在 /src/assets/images/ 目录下，可自行新建文件夹分类管理。

精灵图

精灵图又称雪碧图，原理是将多张小图合并到一张大图上，以便减少 HTTP 请求，提高网站访问速度。

TIP

在 HTTP/1.1 下，因队头阻塞的问题，如果在一个页面里需要展示多张小图，建议使用精灵图

但 HTTP/2 的多路复用特性，已经不太需要精灵图合并了，我们更建议使用 SVG 图标代替精灵图

精灵图原始图片的存放位置位于 /src/assets/sprites/ 目录下，注意按文件夹区分。

项目运行前会根据文件夹生成对应的精灵图文件（精灵图图片和 .scss 资源文件），多个文件夹则会生成多个精灵图文件。需要注意的是，在项目运行时，修改文件夹里的图片，会重新生成相关精灵图文件，但如果新建文件夹，则需要重新运行项目才会生成对应精灵图文件。

可通过 @include 直接使用精灵图，无需手动引入 .scss 文件，使用方法如下：

单独使用全部导入

scss

// @include [文件夹名称]-sprite([文件名称]);
.icon {
  @include example-sprite(address);
}

// 输出
.icon {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: 0px 0px;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}

// @include [文件夹名称]-sprite([文件名称]);
.icon {
  @include example-sprite(address);
}

// 输出
.icon {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: 0px 0px;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}

scss

// @include all-[文件夹名称]-sprites;
@include all-example-sprites;

// 输出
.example-address-sprites {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: 0 0;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}
.example-feedback-sprites {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: -110px 0;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}
.example-payment-sprites {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: 0 -110px;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}

// @include all-[文件夹名称]-sprites;
@include all-example-sprites;

// 输出
.example-address-sprites {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: 0 0;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}
.example-feedback-sprites {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: -110px 0;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}
.example-payment-sprites {
  background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
  background-position: 0 -110px;
  background-size: 210px 210px;
  width: 100px;
  height: 100px;
}

如果是小型项目，静态图片不多，可全部放在一个文件夹内；如果是中大型项目，文件夹可按模块来划分，这样不同的模块最终会生成各自的精灵图文件。

注意

文件命名仅支持字母与数字，所有特殊符号均会被转化为 - ，如：

test_123 => test-123
test@2x => test-2x
test - 123 => test-123
test$%123 => test-123

使用过程中如果发现无法正常展示图片，可检查生成的 .scss 文件，确定在代码中使用的文件名。

样式

样式存放目录为 /src/assets/styles/ ，因为 Vue 的文件特性，页面样式建议写在 .vue 文件里，所以该目录只存放全局样式，方便统一管理。

此目录下还有一个特殊目录，即 /src/assets/styles/resources/ ，这是全局 SCSS 资源目录，首先这个目录里只支持 .scss 文件，其次在这个目录里的文件，无需在页面上引用即可生效并使用。

同样，精灵图目录下生成的 SCSS 资源也是全局可调用的。

说明

全局 SCSS 资源并不是全局样式，是变量、@mixin 、@function 这些东西

组件

公共组件

TIP

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

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

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

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

局部组件

局部组件没有提供专门的存放目录，我们建议采用就近原则，即局部组件与使用页面离得越近越好。你可以在每个模块的文件夹下，建立一个 components 文件夹用于存放局部组件。

全局资源 ​

图片 ​

精灵图 ​

样式 ​

组件 ​

公共组件 ​

局部组件 ​

全局资源

图片

精灵图

样式

组件

公共组件

局部组件