（1）手摸手-学习 Vue3 之 Vite 创建项目

前言

前端系列开发，Vue3 学习需前置在电脑上安装 Node，本系列所使用的版本如下：

创建项目

本系列（及后续章节）使用命令行方式创建项目，操作步骤如下：

打开终端

1. 以管理员权限打开 cmd命令终端（注意路径默认在C盘）
   
2. 切换路径，当前为F:\csdn\vue3(即：创建的vue项目将保存此处)：

cd /d F:\csdn\vue3

创建项目

3. 执行命令npm create vue@latest
   
4. 等待加载片刻后，展示如下，需输入项目的名称。
   此处手动输入项目名为：csdn-junjiu-demo01
   
5. 输入项目名后，敲回车键，展示如下。
   本次选择了：TypeScript 和 Prettier（代码格式化），最后敲回车键。

4. 进入【选择要包含的试验特性】，此处为做选择，直接敲回车。

5. 项目创建完成，如下：

6. 根据提示命令，依次执行即可。

验证

打开浏览器访问http://localhost:5173/，能看到页面（例如下），说明项目创建&运行成功。

开发工具运行项目

项目创建完成后，后续需做功能开发。
本系列使用开发工具 VSCode ，下载地址：https://code.visualstudio.com/Download

打开项目

1. 打开 VSCode 工具后，依次点击：文件 -> 打开文件夹，然后找到创建的项目，选中打开即可（本示例，项目存放路径为：F:\csdn\vue3）
   

2. 项目打开后，如下：
   

运行项目

1. 调出VSCode 开发工具，命令行终端，依次点击：查看 -> 终端
   
2. 运行项目，手动输入npm run dev
   

不出意外的话，可能会发生意外。
可能会遇到如下报错：

解决方案：
按如下截图，依次点击，选择：Command Prompt

选择后，如下：

验证

若有转载，请标明出处：https://blog.csdn.net/CharlesYuangc/article/details/149104939