vite+vue3+typescript 搭建项目框架

最近为了挑战自己，接到公司任务，说要写一个新的系统，心血来潮。就打算用新的技术来搭建一个项目框架。选用了vite + vue3+ts+vant 来搭建。以下是自己一步一步搭建的过程。以及用自己的血泪踩得深坑。（PS:主要是为了激励自己学习新的技术，所以我的项目是从零开始搭建的，边做边学，哭唧唧）

第一步 搭建基础的项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

参考文档：https://vue3js.cn/docs/zh/guide/installation.html#vite

使用 npm：

$ npm init vite-app 
$ cd 
$ npm install
$ npm run dev

第二步 配置（配置文件太多就不一个一个解释了）

1. package.json配置（按需安装依赖）

{
  "name": "myProject",
  "version": "0.0.0",
  "private": true,
  "scripts": { // 指令配置
    "dev": "vite", 
    "dev:remote": "vite --mode remote", 
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:stage": "vite build --mode staging", // 打包指令配置
    "lint": "vuedx-typecheck . && vite build",
    "build": "vite build" // 打包指令配置
  },
  "dependencies": {  // 依赖
    "axios": "^0.21.1", // 请求接口
    "core-js": "^3.15.2",
    "fs-extra": "^10.0.0",
    "js-pinyin": "^0.1.9",
    "vant": "^3.1.3",
    "vue": "^3.0.4",
    "vue-i18n": "^9.1.7",
    "vue-router": "4.0",
    "vuex": "4.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^12.1.4",// commit 规范化（
    "@commitlint/config-conventional": "^12.1.4",// commit 规范化
    "@types/node": "^16.4.0", // typescripty  // @types/node模块可以整体解决模块的声明文件问题
    "@typescript-eslint/eslint-plugin": "^4.28.3", // ts的eslin配置
    "@typescript-eslint/parser": "^4.28.3",// ts的eslin配置
    "@vitejs/plugin-vue": "^1.2.5", //使用.vue文件
    "@vitejs/plugin-vue-jsx": "^1.1.6",//支持 Vue 3