• 首先申明一下,这个模板是自己整理的,并非适用于所有的开发,个人主观性很强,因为自己可以很快的使用它进行业务功能的开发。

首先是库的配置

{
  "name": "project-name",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "element-plus": "^2.3.3",
    "express": "^4.18.2",
    "pinia": "^2.0.34",
    "three": "^0.151.3",
    "vant": "^4.1.2",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tweenjs/tween.js": "^18.6.4",
    "@types/jsdom": "^21.1.0",
    "@types/node": "^18.14.2",
    "@types/three": "^0.144.0",
    "@types/tweenjs": "^1.0.4",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.3.0",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^21.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.4",
    "typescript": "~4.8.4",
    "vite": "^4.1.4",
    "vitest": "^0.29.1",
    "vue-tsc": "^1.2.0"
  }
}

安装的UI库: element-plus, vant 一个是移动端,一个是桌面端的开发UI库,

针对于请求相关的话,使用axios 代码结构:

├─.vscode
├─public
└─src
    ├─assets
    │  ├─fbx_resource
    │  └─login
    ├─components
    │  ├─icons
    │  └─__tests__
    ├─router
    ├─store
    ├─stores
    ├─util
    │  ├─graphics
    │  └─loaders
    └─views