如何创建一个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项目。

相关推荐
ai产品老杨4 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗6 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码8 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜10 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军15 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆24 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆32 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo34 分钟前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
coding随想39 分钟前
深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”
javascript
Watermelo61743 分钟前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验