讲师中心 微信公众号
AI工具推荐 视频效率加速

用Cursor初始化Vue3项目

秋静大大_9120

秋静大大_9120

发布时间:2026-08-07 14:09:50

|

452人浏览过

|

来源于php中文网

原创

在Cursor中快速初始化Vue 3项目需先确认Node.js(≥18.x)和npm(≥9.x)已安装,再执行npm create vue@latest交互式创建项目,选择路由和Pinia后进入目录、npm install安装依赖,最后npm run dev启动开发服务器。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

用cursor初始化vue3项目

要在Cursor中快速初始化一个可运行的Vue 3项目,你不需要先装Vue CLI或全局依赖,只需确保本地已安装Node.js(≥18.x)和npm(≥9.x),然后在Cursor集成终端中执行标准脚手架命令即可启动项目创建流程。

确认开发环境是否就绪

打开Cursor → 按 Ctrl + `(反引号)唤出集成终端 → 输入以下两条命令:

node -v
npm -v

若均输出版本号(如 v18.20.2 和 9.8.1),说明环境满足要求;【若任一命令报错“command not found”】,需先前往 nodejs.org 下载并安装最新LTS版Node.js,安装过程会自动包含npm。

立即学习前端免费学习笔记(深入)”;

用 create-vue 创建项目

这是Vue官方当前唯一推荐的初始化方式,基于Vite,交互清晰、模板现代、无冗余配置。

在终端中执行:

npm create vue@latest

命令会自动下载并运行 create-vue 脚手架。接下来会出现交互式提问:

✔ Project name: …(输入项目文件夹名,例如 my-vue-app)
✔ Add TypeScript? … No(初学者选No,避免语法干扰)
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes(路由是多数项目的刚需)
✔ Add Pinia for state management? … Yes(状态管理后续扩展性强)
✔ Add Vitest for Unit Testing? … No(暂不引入测试复杂度)
✔ Add ESLint for code quality? … No(起步阶段优先跑通逻辑)
✔ Add Prettier for code formatting? … No

Vue
Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

全部选择完毕后回车,脚手架将自动生成项目结构到当前目录下的指定文件夹中。

进入项目并安装依赖

第一步:切换到新生成的项目目录

cd my-vue-app

第二步:安装依赖包

npm install

这一步会读取 package.json 中的 dependencies 列表,从 npm registry 下载所有必要模块到 node_modules 目录。【首次执行需稳定网络,耗时约1–3分钟】,期间终端会显示进度条与包解析日志,无需干预。

启动开发服务器

依赖安装完成后,直接运行:

npm run dev

Vite 会立即启动开发服务器,默认监听 http://localhost:5173。几秒内终端将输出欢迎信息,并自动在系统默认浏览器中打开该地址 —— 页面显示 “Congratulations! You’re running Vue 3 with Vite.” 即表示初始化成功。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
marquee参数有哪些
marquee参数有哪些

marquee参数有direction、behavior、speed、scrolldelay、width、height、bgcolor、cursor、id、align、noresize、nohover、loopcount、bgcolorcolor、scrollamount和vspa。

1260

2023.10.18

Cursor新手入门教程
Cursor新手入门教程

这是一份为新手量身定制的 Cursor 入门全流程指南。无论你是刚从 VS Code 迁移过来的老手,还是编程小白,这份指南都能帮你快速上手这款“代码自动驾驶仪”。

93

2026.04.09

Cursor 核心功能深度解析与实战技巧
Cursor 核心功能深度解析与实战技巧

本专题深度剖析 AI 代码编辑器 Cursor 的核心功能,涵盖 Composer 模式、codebase 索引、实时代码预测(Tab)及 Chat 交互等进阶用法。通过丰富的实战案例,手把手教你如何利用 Cursor 快速构建应用、重构复杂代码及进行自动化 Debug。

158

2026.04.16

Cursor 针对不同开发场景的使用教程
Cursor 针对不同开发场景的使用教程

本专题深度拆解 Cursor 在前端 UI 开发、后端重构、数据爬虫及自动化测试等 10+ 核心场景下的具体用法。详解如何针对不同业务场景配置特定的 .cursorrules,让 AI 真正深入你的业务逻辑。

82

2026.04.16

NumPy性能优化版本更新与常见报错排查
NumPy性能优化版本更新与常见报错排查

本专题整理 NumPy 性能优化、版本更新与常见报错排查相关教程,覆盖向量化计算、广播性能、内存布局、NumPy 2.0 升级、版本兼容冲突、安装导入报错、dtype 溢出、矩阵运算异常和 broadcasting 报错修复,帮助读者系统掌握 NumPy 性能调优与问题定位方法。

0

2026.09.22

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

20

2026.09.21

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

20

2026.09.21

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

0

2026.09.21

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

0

2026.09.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Cursor 使用手册
Cursor 使用手册

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn