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

张开发
2026/4/10 4:35:39 15 分钟阅读

分享文章

vite与tailwindcss创建大屏可视化项目
一、基于vite创建项目使用 npm create vitelatest这行提示的意思这是 npm 在确认你是否同意安装create-vite9.0.4这个工具包是执行npm create vitelatest命令后的正常交互步骤。Need to install the following packages:→ 意思是需要安装以下依赖包create-vite9.0.4→ 要安装的包是create-vite版本号是9.0.4这是 Vite 官方的项目初始化脚手架工具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 22nvm use 22 后再重新执行 npm i或者直接件yes然后项目就运行起来了

更多文章