这几天在直播的过程中，很多内容都是去借鉴（抄）antdv-pro的，但是很多初学者还是不太懂，录播废话又太多，所以我以文章的形式来进行描述，有问题各位也可以一起讨论。

1. 手把手带你分析antdv-pro，并创建属于自己的后台管理（1） - 掘金 (juejin.cn)
2. 手把手带你分析antdv-pro，并创建属于自己的后台管理（2） - 掘金 (juejin.cn)
3. 手把手带你分析arco-design，并创建属于自己的后台管理（3） - 掘金 (juejin.cn)

第一步：创建后台管理工程

不管做啥，第一件事情先把文件夹创建了对吧，打开vite官网开始 | Vite 官方中文文档 (vitejs.dev)，跟着教程先把工程创建了这里我主要使用pnpm作为包管理工具，当然你也可以用别的

pnpm create vite

• 创建项目名称，这里我就使用backend-admin

• 选择一个模板，这里我们选择vue

• 选择这个模板的主要语言，这里我们选择ts，选择ts会引起很大的争论，这里你不想选也没问题，选择自己喜欢的

• 工程创建完毕，根据提示进入文件夹执行对应命令就可以启动项目

第二步：配置vscode开发环境

• 因为vscode好用，所以选择vscode，当然你可以选择别的，这里我们选择vscode

• 打开vue官网，根据vue官网的提示配置vscode工具链 | Vue.js (vuejs.org)
• 这里特别注意，如果使用ts的同学请按照此要求进行配置搭配 TypeScript 使用 Vue | Vue.js (vuejs.org)开启Volar Takeover 模式

目前我们已经完成了所有的前期准备工作，现在可以进行开发我们的后台管理项目了

第三步：推荐使用vscode开发的插件

{
  "recommendations": [
    "vue.vscode-typescript-vue-plugin",
    "antfu.unocss",
    "zixuanchen.vitest-explorer",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

• 打开设置，搜索link，红框位置默认是未选中的，需要进行勾选

• 以上是我常用的插件

第四步：更新项目依赖

pnpm up

尽量使自己的项目保持在最新的版本