老九的博客

打开设置：按 Ctrl + , 或者点击右下角的齿轮图标，然后选择 “Settings”。搜索设置：在设置搜索栏中输入 workbench.editor.enablePreview。禁用预览模式：找到 Workbench > Editor: Enable Preview 选项，将其取消勾选。

当我们有一个样式需要全局引用的时候，我们首先新建一个global.scss的样式文件，这里我举例一下。然后在我们的main.ts 文件中 声明，这样的话我们整个项目都能用到这个样式。

然后在你的vite.config.ts中添加对path模块的声明。通过调用这个ts文件让我们可以在vue文件中使用函数。Eg：我们现在创建一个formRules.ts文件。一般我们把页面要用的公用函数写在一个ts文件中。这种就是你需要在你的项目中安装Path模块。然后在我们需要调用该函数体的vue文件中。有可能语法一开始会提示。

或者将tcconfig.json中的moduleResolution改为node模式，基本都是TypeScript无法识别vue文件中的TypeScript语句导致的。一般像这种提示，有可能就是TypeScript语法的识别问题，一般我们重装一下Vue - Official插件。

这个有个小插曲，一直提示我这个路径的页面文件不存在，网上搜了下好像是Vetur跟Vue3不兼容的关系，但是我这里安装Vetur，所以我把Vue - Official重新安装了下，然后重启了下Visual Studio Code就解决了。然后我们先在我们的文件目录中创建router文件夹，然后新建路由文件index.ts。路径：src\views\index\LoginPage.vue。首先创建一个我们需要访问的页面文件，这里我先创建了一个登录界面。然后在你的main.ts文件下添加引用route的引用。

因为我们开发Vue项目需要使用npm命令来创建和启动，安装node.js是为了获得这个命令，目前和使用node.js无关。因为我们的项目采用Element Plus ，所以用我们刚刚的pnpm安装一下SCSS。然后打开对应的地址，我这里是http://localhost:5173/因为我们的项目采用SCSS，所以用我们刚刚的pnpm安装一下SCSS。下载地址：http://nodejs.cn/download/然后在运行我们的项目，有这个提示证明我们的项目成功运行。到这里证明我们的前端项目已经创建成功。