前言:我们这里使用了两种方法创建项目,分别是使用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 时的开发体验。