写在开头

最近用vue3做了个h5项目，目前已经投入到生产，阶段性总结一下，从依赖着手，后面再说实现。

由于项目面向pc端和移动端，又因为涉及聊天以及表单提交等内容，组内用的最多的ui库就是pc端是element和vant，所以采用了用element-plus和vant3两个ui库分别开发对应端的业务模板。

从package.json 开始看

scripts

"scripts": {
    "dev": "vite",
    "dev:yapi": "cross-env MOCK_TYPE=YAPI vite",
    "dev:h5debugger": "cross-env VITE_H5_DEBUGGER=true vite",
    "build": "vite build",
    "build:h5debugger": "cross-env VITE_H5_DEBUGGER=true vite build",
    "preview": "vite preview",
    "lint:pretty": "pretty-quick --staged",
    "prepare": "husky install",
    "postinstall": "husky install"
}

prepare 和 postinstall 是 husky 在 7.0.0+ 版本之后新加的，用于项目第一次跑的时候安装husky依赖。 husky文档

dependencies

"dependencies": {
    "@element-plus/icons-vue": "^1.0.0",
    "@types/node": "^17.0.18",
    "axios": "^0.26.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.28.0",
    "element-plus": "^2.0.1",
    "fastclick": "^1.0.6",
    "lib-flexible": "^0.3.2",
    "lodash-es": "^4.17.21",
    "mitt": "^3.0.0",
    "pinia": "^2.0.11",
    "postcss-pxtorem": "^6.0.0",
    "qs": "^6.10.3",
    "uuid": "^8.3.2",
    "vant": "^3.4.5",
    "vconsole": "^3.14.5",
    "vue": "^3.2.25",
    "vue-router": "^4.0.12",
    "vue-types": "^4.1.1"
}

ui库用了element-plus和vant，分别对应pc端和移动端
mitt是vue3推荐的事件总线，项目中用来发布订阅websocket事件
postcss-pxtorem 用来将移动端页面进行 px转rem。

devDependencies

"devDependencies": {
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vitejs/plugin-vue-jsx": "^1.3.5",
    "cross-env": "^7.0.3",
    "husky": "^7.0.4",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "prettier": "^2.6.1",
    "pretty-quick": "^3.1.3",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.6.4",
    "unplugin-vue-components": "^0.17.18",
    "vite": "^2.8.0",
    "vite-plugin-compression": "^0.3.6",
    "vite-plugin-html": "^2.1.2",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-optimize-persist": "^0.1.2",
    "vite-plugin-package-config": "^0.1.1",
    "vite-plugin-style-import": "1.4.1",
    "vue-tsc": "^0.29.8"
},

项目通过 husky + commitlint + prettier 对代码进行美化及提交检查
unplugin-auto-import 用于自动导入vue3及element的方法依赖，相当于要是忘了定义了给个保险
unplugin-vue-components 用于按需导入；

分别会生成这两个文件。

vite

"vite": {
    "optimizeDeps": {
      "include": [
        "@element-plus/icons-vue",
        "@vant/use",
        "axios",
        "date-fns",
        "element-plus",
        "element-plus/es",
        "element-plus/es/components/aside/style/css",
        ...
        "element-plus/lib/locale/lang/zh-cn",
        "fastclick",
        "lib-flexible/flexible",
        "lodash",
        "lodash-es",
        "mitt",
        "pinia",
        "qs",
        "uuid",
        "vant",
        "vconsole",
        "vue",
        "vue-router"
      ]
    }
}

这是 vite-plugin-package-config 依赖自动生成的，目的是为了本地调试的时候能更快的加载页面，原话：

Well, I know you can always have those configurations in your vite.config.ts file. But, aware the file is in JavaScript / TypeScript, it is not that friendly to be statically analyzed. By putting some of the static configurations in your package.json file, you can have it shareable for other scripts and tools (or even manipulate it) by simply loading and parsing the JSON file.

后续

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

Vue3 H5 项目尝试（一）