项目结构

├─ .env
├─ .env.development
├─ .env.production
├─ .gitignore
├─ .husky
├─ .prettierignore
├─ README.md
├─ auto-imports.d.ts
├─ build
├─ commitlint.config.js
├─ components.d.ts
├─ index.html
├─ mobile.html
├─ package.json
├─ postcss.config.js
├─ prettier.config.js
├─ public
│  ├─ favicon.ico
│  └─ sdk
│     ├─ README.md
│     └─ bgzsWebSocketSDK-0.5.js
├─ src
│  ├─ api
│  ├─ assets
│  ├─ bootstrap.ts
│  ├─ components
│  ├─ enums
│  ├─ hooks
│  ├─ layout
│  ├─ mobile
│  ├─ pc
│  ├─ plugins
│  ├─ router
│  ├─ store
│  └─ utils
├─ tsconfig.json
├─ tslint.json
├─ types
├─ vite.config.ts
└─ yarn.lock

.env相关

检查process.cwd()路径下.env.development.local、.env.development、.env.local、.env这四个环境文件。
输出NODE_ENV和VITE_开头的键值对。
VITE_开头的键值对后面的不会覆盖前面的。
NODE_ENV的值后面的会覆盖前面的。 .env.[mode].local 这个文件中的优先级最高
.env.[mode] 优先级次之
.env.local 优先级最低

husky

项目钩子 commit-msg 检查commit信息

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

yarn commitlint --edit "$1"

pre-commit格式化已修改文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

yarn pretty-quick --staged

build

打包配置工具，引入各种plugin

vite-plugin-compression
vite-plugin-html
@vitejs/plugin-vue
@vitejs/plugin-vue-jsx
unplugin-auto-import/vite
unplugin-vue-components/resolvers
unplugin-vue-components/vite
vite-plugin-optimize-persist
vite-plugin-package-config
vite-plugin-style-import

index.html & mobile.html

index.html 为pc端入口

<body>
    <div id="app"></div>
    <div id="appProvider" style="display: none"></div>
    <script type="module" src="/src/pc/main.ts"></script>
    <script src="/sdk/bgzsWebSocketSDK-0.5.js"></script>
</body>

mobile.html 为移动端入口

<head>
    ...
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"
    />
    ...
</head>
<body>
    <div id="app"></div>
    <div id="appProvider" style="display: none"></div>
    <script src="/sdk/bgzsWebSocketSDK-0.5.js"></script>
    <script type="module" src="/src/mobile/main.ts"></script>
</body>

app 节点用来挂载主程序
appProvider 节点用来挂载项目需要的弹窗、提示、Loading组件

postcss.config.js

// postcss.config.js
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      exclude: (e) => {
        return e.indexOf('mobile') === -1 && e.indexOf('vant') === -1;
      },
      selectorBlackList: ['.norem'], // 过滤掉.norem-开头的class，不进行rem转换
    },
  },
};

exclude 字段用于剔除不需要转换的文件

public

里面放了一个websocket的sdk，会自动创建一个socket对象挂载到window的bgzsWebSocket属性上。

src

hooks

存放Composition API，用于逻辑抽象，方便pc及移动两端逻辑复用。

mobile & pc

分别存放移动端及pc端的App.vue、main.ts、页面模板、各自的路由及样式

plugins

注册事件总线mitt及注册websocket全局响应事件

router

通用路由、通用路由守卫

store

pinia实现项目状态管理

utils

工具函数以及axios中间件的编写

types

全局类型定义

以上基本上是整个项目结构的基本构成，之后详细聊vue3

vite.config.ts 配置
实现一个登录
socket实现
pc移动端之间逻辑复用，模板隔离
provider提供通用方法调用组件

Vue3 H5 项目尝试（二）