当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/356552.html

相关文章:

  • AWS迁移与传输之Migration Hub
  • 网络渗透思考
  • 2.8万字总结:金融核心系统数据库升级路径与场景实践
  • Linux:进程控制(二.详细讲解进程程序替换)
  • Elasticsearch8.13.4版本的Docker启动关闭HTTPS
  • linux 之dma_buf (8)- ION简化版本
  • ⌈ 传知代码 ⌋ 高速公路车辆速度检测软件
  • scrapy 整合 mitm
  • linux大文件切割
  • 图像分割模型LViT-- (Language meets Vision Transformer)
  • CANDela studio之CDDT与CDD
  • Java中的注解(Annotation)是什么?它们有什么用途?
  • 【CUDA】Nsight profile驱动的CUDA优化
  • 字符串的拼接
  • HIVE3.1.3+ZK+Kerberos+Ranger2.4.0高可用集群部署
  • Android ANR Trace日志阅读分析技巧
  • 前端Ajax、Axios和Fetch的用法和区别笔记
  • Android的Framework(TODO)
  • 牛客小白月赛94 EF题解
  • 大数据开发面试题【Flink篇】
  • Java技术深度解析:高级面试问题与精粹答案(二)
  • 算数运算符
  • 闲话 .NET(3):.NET Framework 的缺点
  • WPF实现简单的3D图形
  • 设计模式之创建型模式---原型模式(ProtoType)
  • git命令新建远程仓库
  • Defog发布Llama-3-SQLCoder-8B,文本转SQL模型,性能比肩GPT-4,准确率超90%,消费级硬件可运行
  • 防刷发送短信验证码接口的五种简单好用方法绝对够用
  • ubuntu中idea创建spark项目步骤
  • 回文链表(快慢指针解法之在推进过程中反转)