前端搭建（VUE3+TS+vite）--补充

滋滋冒you

已于 2023-11-28 10:42:02 修改

阅读量472

点赞数 10

文章标签：前端

于 2023-11-28 10:14:42 首次发布

本文链接：https://blog.csdn.net/jt15881622410/article/details/134661088

版权

前言：我们这里使用了两种方法创建项目，分别是使用vite创建和使用vue脚手架创建

1、确保已经安装了 Node.js 、 npm、Vite

确保你的计算机上安装了 Node.js 和 npm。你可以从官方网站 https://nodejs.org/ 下载并安装。

2、创建项目

使用vite创建

在安装了npm的前提下在安装vite,打开终端（命令行界面）并运行以下命令来全局安装 Vite：

npm install -g create-vite

在将要创建项目的目录文件夹下打开cmd，输入命令

create-vite jt-design --template vue-ts

这会在当前目录下创建一个名为 jt-design 的项目，使用 vue-ts 模板，其中包括了 Vue 3 和 TypeScript 的配置
2. 使用vue脚手架创建
输入 npm init vue@latest 创建，这个相对于vite创建会慢一些，他配置的东西也会多一些

3、安装依赖、启动项目

可以选择用vscode 打开文件，在终端运行 npm install ，安装好依赖后启动项目，运行 npm run dev 命令启动 Vite 的开发服务器，这样就运行成功了

注意：这里配置好的项目会有一点问题，那就是ts不支持编译.vue的文件，所以有些引入.vue文件会报红，如下图

需要我们手动配置以下，可以参考这篇文章配置： https://editor.csdn.net/md/?articleId=134659313

4、vscode 扩展推荐

在 Visual Studio Code（VSCode）中，为了提升 Vue 3 项目的开发体验，我们找了一些适用于vue开发的扩展，并且我们以安装数量由多到少的顺序排序了一下，以下就是常用的七个扩展：

Volar: 相信 Vetur 写过vue2的同学应该都多少知道一些，他是一个为 Vue.js 提供支持的扩展，它提供了对 .vue 文件的语法高亮、智能感知、错误检查等功能。但是Volar是专门为 Vue 3 设计的，它使用了新的 API 并提供了一些 Vue 3 的优化，可以更好地支持 Vue 3 的特性，如果写vue3项目的话可以将vetur先禁用。
.Vue VSCode Snippets: Vue VSCode Snippets这个扩展为 Vue 文件提供了一系列的代码片段，可以加速你的编码过程。
ESLint: 如果你的项目使用 ESLint 进行代码检查，安装 ESLint 扩展可以让 VSCode 更好地与你的配置协同工作，显示 lint 错误和警告。
Prettier - Code formatter: Prettier 是一个代码格式化工具，可以使你的代码风格保持一致。与 ESLint 配合使用时，可以确保代码的整洁。
Debugger for Chrome: 如果你在 Vue 3 项目中使用了 Chrome 调试器，Debugger for Chrom这个扩展可以让你在 VSCode 中进行调试。
Path Intellisense: Path Intellisense这个扩展可以帮助你更轻松地引入文件或模块，对于大型的 Vue 3 项目尤其有用。
Auto Import: Auto Import 这个扩展可以自动导入你在项目中使用的模块，减少手动输入的工作

！！注意：尽量按需下载，千万别一股脑全部安装了，否则到时候运行项目会卡顿的，我前期使用就只安装了Volar、Vue VSCode Snippets、Auto Import

另外由于我们这里使用了typeScript,这里也有相应的推荐扩展，那就是：** TypeScript Vue Plugin (Volar) ** ，它旨在提供更好的 TypeScript 支持和类型推导，特别是为 Vue 3 项目而设计。Volar 的目标是优化开发者在使用 TypeScript 和 Vue.js 时的开发体验。