开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
Vue 3 正式版发布已经挺久了，Vue CLI 早已进入了维护模式， Vite 也更新到了 3.x，作为一个合格的切图仔，哪怕学不动还得学，下面记录一下搭建 Vite 3 + Vue 3 + TypeScript 的前端工程化项目的过程。
技术栈
- Vite 3 - 构建工具
- Vue 3 - 渐进式 JavaScript 框架
- Vue Router - Vue 官方路由管理器
- Pinia - Vue 全局状态管理库
- ant desing vue UI组件库
- Less - CSS 预处理器
- Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js
- Husky + Lint-Staged - Git Hook 工具
- EditorConfig + ESLint + Prettier + Stylelint - 代码规范
- Commitizen + Commitlint - 提交规范
VSCODE
编辑器使用 VSCODE，官网安装即可。
指定扩展插件安装位置
默认情况下，(Windows) VSCODE 的安装路径为 C:\Users\用户名\.vscode\extensions
如果需要将 VSCODE 插件安装位置从 C 盘改到其他位置，更推荐下面第二种方法；不想更改可直接忽略此节。
修改快捷方式
例如，我想将扩展路径设置为D:\WorkFile\extensions，先创建好这个目录。
打开VSCode快捷方式的属性。然后，按下图修改：
在目标 "D:\Program Files\Microsoft VS Code\Code.exe" 后添加自定义的D盘存储地址--extensions-dir "D:\WorkFile\extensions"。
然后将原来C:\Users\用户名.vscode\extensions下的扩展剪切到新的扩展路径D:\WorkFile\extensions下
使用 mklink 命令创建符号链接
打开终端输入：
mklink /D "C:\User\huhao\.vscode\extensions" "D:\WorkFile\extensions"
提示：当文件已存在时，无法创建该文件。这是因为C:\Users{username}.vscode目录下有extensions文件夹，需要将该文件夹先迁移到目标位置D:\WorkFile\extensions，删除C盘下的extensions。然后再执行该命令就可以了。
创建软链接后的文件夹会有个小箭头：
VSCODE 插件推荐
- DotENV： .env 文件 高亮
- ESLint： 脚本代码检查
- i18n Ally： i18n 插件
- Prettier： 代码格式化
- stylelint： css 格式化
vscode 完整配置内容可查看 www.yuque.com/southerly/t…
