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

相关推荐
白兰地空瓶1 小时前
🏒 前端 AI 应用实战:用 Vue3 + Coze,把宠物一键变成冰球运动员!
前端·vue.js·coze
Liu.7742 小时前
vue3使用vue3-print-nb打印
前端·javascript·vue.js
松涛和鸣3 小时前
Linux Makefile : From Basic Syntax to Multi-File Project Compilation
linux·运维·服务器·前端·windows·哈希算法
dly_blog3 小时前
Vue 逻辑复用的多种方案对比!
前端·javascript·vue.js
万少4 小时前
HarmonyOS6 接入分享,原来也是三分钟的事情
前端·harmonyos
烛阴4 小时前
C# 正则表达式:量词与锚点——从“.*”到精确匹配
前端·正则表达式·c#
wyzqhhhh4 小时前
京东啊啊啊啊啊
开发语言·前端·javascript
JIngJaneIL4 小时前
基于java+ vue助农电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
q_19132846954 小时前
基于Springboot+MySQL+RuoYi的会议室预约管理系统
java·vue.js·spring boot·后端·mysql·若依·计算机毕业设计
想学后端的前端工程师4 小时前
【Java集合框架深度解析:从入门到精通-后端技术栈】
前端·javascript·vue.js