前言

由于最近公司需要重构老的公众号H5项目，都没有时间摸鱼看瓜了（ WYF 和 DMZ 懂的都懂 ）。。。闲话不多说，最后技术选型决定使用最新的 Vue 3 + TypeScript + Vant + Vite 来构建项目，下面会做一些详细的记录，加深下对项目的理解和印象。

npm init @vitejs/app

执行完毕之后按照下图所示操作初始化 Vue 3 + TypeScript + Vite 基础项目。

接下来的 install 和启动项目的步骤不做陈述，不懂的下面更看不懂，自行百度吧。。。

开发时使用 webstorm 编辑器，依赖管理使用 npm 库，有使用 yarn 的朋友自行查阅对应指令。
主要的依赖文档：Vue3 + TypeScript + Vant3 + Vite2

---

使用的依赖（含安装指令和文档地址）

vue-router4

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。具体可查看官方 文档

npm install vue-router@4 -S

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。具体可查看官方 文档
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

npm install vuex@next -S

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。具体可查看官方 文档

npm install axios -S

vant

ui 组件库。具体可查看官方 文档

npm install vant@next -S

less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。具体可查看官方 文档

npm install less -D

types/node

没有安装此依赖的话，配置文件使用 require 等会报错。
node.js 不是内置对象的一部分，如果想用 typescript 写 Node.js，则需要引入第三方声明文件。
还需要在 tsconfig.json types 中配置 node 字段

npm install @types/node -D

fs-extra

可使用 node.js 中不包含的方法。具体可查看官方 文档

npm install fs-extra -D

vue-types

VueTypes 是一组可配置的 prop 验证器。具体可查看官方 文档

npm install vue-types -S

eslint

ESLint 是一种用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具。具体可查看官方 文档

npm install eslint -D

prettier

Prettier 是一款强大的代码格式化工具，支持JavaScript、Typescript、Css、Scss、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown等，基本上前端能用到的文件格式都可以搞定，是当下最流行的格式化工具。具体可查看官方 文档

npm install prettier -D

eslint-plugin-vue

Vue.js 的官方 ESLint 插件。具体可查看官方 文档
这个插件可以让我们检查