如何创建一个vue项目?详细教程,如何创建第一个vue项目?

  1. 已经安装node.js
  2. 在自己找的到的地方新建一个文件夹用于存放项目,记住文件夹的存放路径,以我为例,我的文件夹路径为D:\tydic

打开cmd命令窗口,进入刚刚的新建文件夹

切换硬盘: D:

进入文件夹:cd tydic

使用官方脚手架新建项目:npm create vue@latest

(可能直接进入项目名,也可能问你是否使用vue3.10.3这个版本创建项目,直接yes就好了)

输入新建项目的名称demo3

开始设置选择,你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

✔ Project name: ... <your-project-name>

✔ Add TypeScript? ... No / Yes

询问你是否使用TypeScript语法?也就是JavaScript的升级版,目前新手不需要安装这个,会增加学习的成本,可以后面进阶了再去单独学习。

✔ Add JSX Support? ... No / Yes

涉及Render函数使用等的一个方便阅读的插件,目前不需要,后面会用到

✔ Add Vue Router for Single Page Application development? ... No / Yes

✔ Add Pinia for state management? ... No / Yes

需要用到路由和pinia,选择yes(左右箭头可以更换选择no/yes)

✔ Add Vitest for Unit testing? ... No / Yes

✔ Add an End-to-End Testing Solution? ... No / Cypress / Nightwatch / Playwright

✔ Add ESLint for code quality? ... No / Yes

这个目前千万不要装,会安装很多配置,可能会导致代码启动不起来,且找不到哪里出错,需要把他强制关闭还不知道怎么关,很复杂,会增加很多负担,比TypeScript还麻烦,目前不要装。

✔ Add Prettier for code formatting? ... No / Yes

✔ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

剩下两个也不需要

Scaffolding project in ./<your-project-name>...

Done

✔ Project name: ... <your-project-name>

✔ Add TypeScript? ... ++No++ / Yes

询问你是否使用TypeScript语法?也就是JavaScript的升级版,目前新手不需要安装这个,会增加学习的成本,可以后面进阶了再去单独学习。

✔ Add JSX Support? ... ++No++ / Yes

涉及Render函数使用等的一个方便阅读的插件,目前不需要,后面会用到

✔ Add Vue Router for Single Page Application development? ... No / ++Yes++

✔ Add Pinia for state management? ... No / ++Yes++

需要用到路由和pinia,选择yes(左右箭头可以更换选择no/yes)

✔ Add Vitest for Unit testing? ... ++No++ / Yes

✔ Add an End-to-End Testing Solution? ... ++No++ / Cypress / Nightwatch / Playwright

✔ Add ESLint for code quality? ... ++No++ / Yes

这个目前千万不要装,会安装很多配置,可能会导致代码启动不起来,且找不到哪里出错,需要把他强制关闭还不知道怎么关,很复杂,会增加很多负担,比TypeScript还麻烦,目前不要装。

✔ Add Prettier for code formatting? ... ++No++ / Yes

✔ Add Vue DevTools 7 extension for debugging? (experimental) ... ++No++ / Yes

剩下两个也不需要

Scaffolding project in ./<your-project-name>...

Done.

此时项目已经创建,可以在我们刚刚新建的文件夹里看到

结构如下

可以点开package.json查看一下

然后执行绿色提示命令运行项目

cd <your-project-name>

npm install

npm run dev

一定要先进入项目文件

再npm install

再npm run dev

顺序不要弄错,

否则会出现以下vite既不是内部也不是外部的错误

没有npm i就没有第三方依赖,run不起来的

输入npm i下载依赖

下载成功

运行项目

这样我们就启动了我们第一个vue项目。

相关推荐
Hilaku2 分钟前
技术好就能升职是前端圈最大的谎言!
前端·javascript·程序员
lhldsg3 分钟前
树洞倾诉的核心需求与产品定位误区
java·前端·小程序
光影少年16 分钟前
react navite高频手写/实操题
前端·javascript·react native·react.js·前端框架
hunterandroid29 分钟前
HarmonyOS 弱网与离线优先架构实战:请求队列、本地缓存与增量同步
前端·前端框架
lhldsg34 分钟前
宠物同城领养平台开发实战:从需求分析到上线部署指南
java·前端·小程序·需求分析·宠物
hunterandroid34 分钟前
Android 内存泄漏排查实战:从 LeakCanary 报警到根因定位
android·前端
AI视觉网奇35 分钟前
3d子部件高亮选中
开发语言·javascript·3d
leoZ23136 分钟前
AI+前端提效-12 AI辅助前端性能优化与监控:从开发到线上全流程提效
前端·人工智能·神经网络·自然语言处理·性能优化·keras·知识图谱
阿图灵38 分钟前
LangGraph 实战 03:Workflows 与 Agents——六种工作流模式与智能体实战(附 6 个可运行示例)
java·前端·javascript·工作流·ai agent·智能体·langgraph
狂炫冰美式43 分钟前
电脑合盖之后 Cursor 还在偷我电?看看为啥
前端·人工智能·后端