vue3-scene-web

初始化

yarn

yarn serve

目录结构

|-build
|-public // 静态资源
|-src
  |- api // 接口文件
  |- types // 类型声明
  |- assets // 公用代码资源
  |- components // 公用组件
  |- views // 项目页面入口
  |- utils // 公用工具函数
  |- router // 路由配置
  |- store // 全局状态管理
  |
  |- env.d.ts // 环境变量声明
  |- global.d.ts // 全局变量声明
  |- el.d.ts // element 声明

多场景模式

通过 process.env.SCENE 区分场景

尽量避免使用 .vue 自定义后缀，ide 暂不能友好支持模糊匹配 .vue，需要明确使用 demo.vue，导致无法区分场景

关于分支

release 稳定版本，线上代码稳定一段时间后同步 release-buffer

release-buffer 发布版本，场景线分支发布生产环境需要合回此分支，使用 --no-ff 记录合并操作

🚀 关于代码格式化

推荐使用 ide 插件，在 ide 扩展中下载 prettier

以 vscode 为例：

在 file -> preferences -> setting 中搜索 defaultFormatter
选择 Prettier - Code formatter
接着搜索 format
将 editor: format on save 勾选

🤖 关于自动化部署

发布地址：http://face3d.4dage.com:29394/deploy/app

新建的分支如果需要自动化部署，需要在 package.json 下增加指令

举例：新增一个demo大场景
1. 在 release-buffer 下新增 demo 分支
2. 在 scripts 中新增 push:demo 指令，注意 push: 后的参数需要与分支名相同
3. 注意：不要在 release* 下发布版本

测试环境项目地址：https://scene.4dage.com/?m=1172

mv .temp/* .

scene=${SPUG_GIT_BRANCH%%/*}
lastFileDir=$(ls -d -F /home/spug_backup/vue3-scene-web/* -t | grep '/$' | head -n 2 | tail -n 1)

echo "当前场景值：$scene"
echo "上一个部署目录：$lastFileDir"

if [ -d "${lastFileDir}data/" ]
then
  echo "copy data file"
  cp -r -n ${lastFileDir}data/ .
fi

if [ -d "${lastFileDir}resources/web/" ]
then
  echo "copy resources file"
  if [ $scene = "test" ]
  then
    rsync -au --exclude=js --exclude=img --exclude=fonts --exclude=css ${lastFileDir}resources/web ./resources
  else
    rsync -au --exclude=$scene ${lastFileDir}resources/web ./resources
  fi
fi

rm -r .temp