template-vite2

该模板适用于大多数的移动端/PC端项目，由 Vite2 、Vue3 、 SCSS 与 TypeScrpt 等技术栈构成。

支持 Vite 提供的所有功能，同时自定义了一些专有功能。

目录结构

|-- plugins                     # 文件夹：vite 自定义插件
|-- src                         # 文件夹：源码
|   |-- assets                  # 文件夹：图片、音频等媒体资源
|   |   |-- share.jpg           # 分享小图
|   |-- components              # 文件夹：自定义组件
|   |-- public                  # 文件夹：不添加 Hash 、不压缩的文件
|   |-- script                  # 文件夹：预配置文件、自定义脚本
|   |   |-- config.share.ts     # 预配置分享信息
|   |   |-- config.url.ts       # 预配置接口链接、外链等，自动区分接口的测试与正式链接
|   |   |-- getUserInfo.ts      # 授权
|   |-- style                   # 文件夹：样式
|   |   |-- page.scss           # 每个 vue 自动引用
|   |   |-- reset.scss          # 重置样式
|   |-- App.vue                 # 默认 Vue 入口文件
|   |-- index.html              # 入口文件、配置 title
|   |-- main.ts                 # 默认脚本入口文件
|-- types                       # 文件夹：ts 类型声明
|-- .gitignore                  # git 忽略配置
|-- package.json                # npm script
|-- readme.md                   # 项目链接、监测链接
|-- tsconfig.json               # ts 配置
|-- vite.config.ts              # vite 配置

NPM 命令

打开项目初根目录的 package.json 文件，就可以查看到项目支持的 npm 命令：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "release": "node ./plugins/project.release.js release", // 发布到测试地址
    "online": "node ./plugins/project.release.js online", // 发布到正式地址
  }
}

如启动本地服务器，配合 npm 命令使用即可：

$ npm run dev

发布到测试地址：

$ npm run release

发布到正式地址：

$ npm run online

TIP

项目发布前，首先将本地修改 git push 至远程仓库，再进行 npm run release 发布到测试地址，最后 npm run online 发布到正式地址，也可以使用下面的组合命令。

自动将代码提交到远程仓库，并发布到测试地址：

$ npm run release "commit message"

自动将代码提交到远程仓库，并同时发布到测试地址、正式地址：

$ npm run online "commit message"

TIP

如果已经部署到测试地址了，则不能使用上面的组合命令，直接 npm run online 即可。

正式地址资源改为 NOS：

$ npm run online "commit message" nos=true

或

$ npm run online message="commit message" nos=true

TIP

上传 NOS 仅支持以上组合命令。使用这个命令测试地址资源也就指向了 nos ，可以等正式地址同步后再体验测试地址，建议最后上线的时候再使用这条命令，平常测试就还是按照以前的方式来。

快捷引用

默认配置了如下快捷引用：

@style：./src/style；
@script：./src/script；
@assets：./src/assets；
@components：./src/components；

示例：

<template>
  <img src="@assets/icon.png">
</template>

.icon{
  background: url(@assets/icon.png);
}

import AppHome from "@components/AppHome.vue";

TIP

根据 Vite Glob 导入规则，Glob 导入不支持快捷引用。

import 多个资源

Vite 内置的 Glob 导入功能即可以完成多个资源导入。

示例：

const loadAssets = import.meta.globEager('./assets/*.(png|jpg)');

获取资源 url 数组：

const loadAssets = import.meta.globEager('./assets/*.(png|jpg)');
const loadAeeetsUrls = Object.values(loadAssets).map(item=> (item as any).default);

移动端适配

移动端使用自定义的 rpx 单位即可完成适配，规则为 750rpx = window.innerWidht。

.font{
  width: 200rpx;
  font-size: 25rpx;
}

SCSS 扩展功能

除了 SCSS 内置的功能，自定义了以下专有功能。

自动补充图片宽高

如果 background 的属性为本地资源路径，且没有设置 width 、height ，会自动补充图片宽高。

如：

.icon{
  background: url(./assets/icon.png);
}

编译后：

.icon{
  background: url(./assets/icon.png);
  width: 50rpx;
  height: 50rpx;
}

自动补充 margin

如果 left 属性单位为 % ，且没有设置 margin-left，为了方便居中布局，会自动追加 margin-left 。top 处理与 right 相同。

如：

.icon{
  background: url(./assets/icon.png);
  position: absolute;
  left: 50%;
  top: 50%;
}

编译后：

.icon{
  background: url(./assets/icon.png);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50rpx;
  height: 50rpx;
  margin-left: -25rpx;
  margin-top: -25rpx;
}

TIP

使用 margin-left: auto ，可以避免自动追加。

@each 资源遍历

自定义了 import() 方法导入资源，资源匹配规则与 Vite Glob 规则保持一致，点此查看更多 Glob 语法。

如：

@each $path, $index, $name in import('./assets/icon_([0-9]*).jpg'){
  .icon-#{$index}{
    background: url(#{$path});
  }
}

编译后：

.icon-0{
  background: url(./assets/icon_0.jpg);
  width: 50rpx;
  height: 50rpx;
}
.icon-1{
  background: url(./assets/icon_1.jpg);
  width: 50rpx;
  height: 50rpx;
}
// ...后续已省略

TIP

([0-9]*) 与 [0-9]* 的区别：加了括号 $index 为捕获到的资源名称中的数字，没有括号 $index 为资源导入的顺序。

public 静态资源文件夹

如果有资源想保持原有文件名、图片不压缩等需求，可以将资源放置在 ./src/public 文件夹内，该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

// 资源路径：./src/public/icon.png
<img src="/icon.png">

TIP

由于 public 文件夹跳过了编译，因此文件会存在缓存，可以通过添加版本号来避免缓存，如 <img src="/icon.png?v=1">。

3D 模型加载

目前支持 .obj、.glb、.hdr 等资源直接引入：

import modelSrc from '../assets/model/model.glb';
new GLTFLoader().load(modelSrc);

TIP

由于 .gltf 文件内部的资源路径，在生产环境不会被追加 hash，因此可以将 GLTF 转化为 GLB 格式使用。

对于未包含的格式，可以通过 assetsInclude 选项进行配置。

`console.info` 扩展功能

开发环境下支持 console.info(<HTMLCanvasElement>canvas) 自动打印出图片，方便测试长按保存图片功能。

// 结合 CreatePicture 插件使用方法如下：
const cp = new CreatePicture({
  width: 750,
  height: 1448,
});
cp.getPicture().then((picture)=>{
  console.info(cp.canvas) //控制台可打印出生成的base64图片
});

配置分享信息

在 ./src/script/config.share.ts 文件进行配置即可：

import shareImage from '@assets/share.jpg';//分享图片 自动加了hash的
const shareArr = [
  {
    fText:'朋友圈分享文案',
    title:'分享好友标题',
    desc:'分享好友描述'
  },
];

公用接口

在 ./src/script/config.url.ts 文件中，内置了一些公用的接口，调用方式如下：

import {ref, provide, inject,} from 'vue';
import urlData from "@script/config.url";

const vueHttp = inject('vueHttp');
vueHttp.post(urlData.base64ToUrl).then(({data})=>{
  
})

template-vite2 #

目录结构 #

NPM 命令 #

快捷引用 #

import 多个资源 #

移动端适配 #

SCSS 扩展功能 #

自动补充图片宽高 #

自动补充 margin #

@each 资源遍历 #

public 静态资源文件夹 #

3D 模型加载 #

console.info 扩展功能 #

配置分享信息 #

公用接口 #

template-vite2

目录结构

NPM 命令

快捷引用

import 多个资源

移动端适配

SCSS 扩展功能

自动补充图片宽高

自动补充 margin

@each 资源遍历

public 静态资源文件夹

3D 模型加载

`console.info` 扩展功能

配置分享信息

公用接口