vite与tailwindcss创建大屏可视化项目

一、基于vite创建项目，使用 npm create vite@latest

这行提示的意思

这是 npm 在确认你是否同意安装 create-vite@9.0.4 这个工具包，是执行 npm create vite@latest 命令后的正常交互步骤。

1. Need to install the following packages:
   → 意思是：需要安装以下依赖包
2. create-vite@9.0.4
   → 要安装的包是 create-vite，版本号是 9.0.4（这是 Vite 官方的项目初始化脚手架工具）
3. Ok to proceed? (y)
   → 意思是：是否继续执行安装？括号里的 (y) 表示默认选项是「Yes（是）」

下一步操作

直接在光标处输入 y（或者直接按回车，因为默认就是 y），然后回车，就会自动安装 create-vite，并进入 Vite 项目的创建流程。

二、 imooc-visualization名字

三、框架vue

四、语言

这是 Vite 项目创建的最后一步确认环节，你已经选好了框架和语言，现在到了「是否自动安装依赖并启动项目」的选择。

1. 已选配置回顾

• Select a framework: Vue
  → 你已经选择了 Vue 作为前端框架（做数据大屏最常用的选择）
• Select a variant: JavaScript
  → 你已经选择了 JavaScript 作为开发语言（不是 TypeScript，上手更简单）
• 项目名：imooc-visualization（你之前输入的项目名称）

2. 当前待选选项

Install with npm and start now?

→ 翻译：是否用 npm 安装依赖，并立即启动项目？

• ● Yes（当前默认选中，绿色圆点）：选这个 = 全自动
  • 自动执行 npm install 安装所有依赖
  • 自动执行 npm run dev 启动开发服务器，直接打开浏览器访问项目
• ○ No：选这个 = 手动操作
  • 只生成项目文件，不安装依赖、不启动
  • 后续需要你手动执行：下面步骤。

这里我选择了no

后续需要你手动执行

运行

cd imooc-visualization # 进入项目目录

npm install # 安装依赖

npm run dev # 启动项目

如果

在控制台 nvm ls查看一下，你都有什么版本 的

如果有22，就执行 nvm use 22

如果没有22，就执行 nvm install 22

nvm use 22 后，再重新执行 npm i

或者直接件yes

然后项目就运行起来了