如何用ts搭建一个vue3通用项目底座 | 第二篇（1）：项目创建

前言

上一篇装好了环境，接下来先创建一个基本项目。打包工具用的vite，语言用的ts，vue3还是得和ts放一起看着才舒服。

一、项目搭建

1、使用pnpm创建前端工程

pnpm create vite

这样我们就得到一个基础的比较完善的项目了。

2、更换npm镜像源

在下包之前，记得查看npm镜像源有没有配置。

npm config get registry

如果不是这个镜像源，需要更换一下。这个地址是淘宝最新的镜像源。

npm config set registry https://registry.npmmirror.com/

然后再下包，启动项目。

pnpm install

pnpm run dev

二、完善项目配置

因为这里是用pnpm创建的，所以基本的设置是有的，但是还不是很好用，重新配置一下。

1、vscode设置

删掉原有的extensions.json和settings.json，再新加上以下文件。

// extensions.json
{
   
  "recommendations": [   // 向此工作区的用户推荐的扩展列表。扩展的标识符始终为 "${publisher}.${name}"。例如: "vscode.csharp"。
    "christian-kohler.path-intellisense", // 文件路径名提示
    "vscode-icons-team.vscode-icons",  // 给文件夹、文件添加上舒适的图标
    "davidanson.vscode-markdownlint",  // markdown文档格式
    "stylelint.vscode-stylelint",   // stylelint的vscode设置规则
    "bradlc.vscode-tailwindcss",   // ta