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

news2024/11/18 7:39:15
  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.coloradmin.cn/o/1710701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于ViutualBox+Ubuntu(Linux)的开发环境搭建

实际在选择虚拟机的时候纠结了要用virualbox还是vmware&#xff0c;初步比较结果&#xff1a; 1.virualbox能够使用vmware的硬盘格式&#xff0c;因此可以自由选择。 2.都能够实现主机和宿主机之间的文件夹共享。 3.virualbox是自由软件&#xff0c;vmware是商业软件。 在功能上…

STM32 入门教程(江科大教材)#笔记2

3-4按键控制LED /** LED.c**/ #include "stm32f10x.h" // Device headervoid LED_Init(void) {/*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE); //开启GPIOA的时钟/*GPIO初始化*/GPIO_InitTypeDef GPIO_InitStructure;GPIO_I…

go 微服务框架kratos使用中间件的方法

一、中间件的概念 在go语言中&#xff0c;中间件是一种用于处理http请求的开发模式&#xff0c;允许开发人员在请求到达处理程序之前或之后执行特定的操作&#xff0c;如日志记录、身份验证、错误处理等。 中间件通常是一个函数&#xff0c;它接收一个 http.Handler 作为参数…

解读makefile中$(patsubst pattern,replacement,text)

在 Makefile 中&#xff0c;$(patsubst pattern,replacement,text) 是一个用于模式替换的函数&#xff0c;它可以将文本中符合指定模式的部分替换为指定的字符串。这个函数通常用于对文件名或路径进行模式匹配和替换&#xff0c;非常适合在 Makefile 中进行文件名的转换操作。 …

队列的特性及代码实现(C语言)

目录 队列的定义 队列的实现分析 代码实现 Queue.h Queue.c 队列的定义 队列是只允许在一端进行插入操作&#xff0c;而在另一段进行删除操作的线性表。 首先&#xff0c;让我们来看一看生活中的队列&#xff0c;当我们去银行办理业务的时候&#xff0c;我们进入银行的时候…

CANDela studio使用小tips

打开软件的时候注意先选择英文&#xff0c;因为双击CDD/CDDT文件默认打开的是德文&#xff0c;所以最正确的打开方式是先打开CANDela studio&#xff0c;再导入CDD&#xff0c;不仅可以避免用德文打开&#xff0c;还能避免vector软件的bug。 不同的版本有不同的权限。 admin有…

【一竞技DOTA2】RAMZES666替补参加裂变联赛

1、根据主办方文件,RAMZES666将继续作为Tundra战队替补参加裂变联赛。该比赛为欧洲线上赛,于5月27日-30日举行,总奖金8万美元。 除此之外,Nigma战队在上个月宣布四号位Matthew离队后,也选择启用老队员GH参赛。而在本月初让ah fu转回教练、携替补Thiolicor出战PGL瓦拉几亚的Secr…

《Navi日语社》App支持日语翻译、日文OCR文字识别提取、文字转语音和语音识别功能!

随着中日交流日益频繁&#xff0c;学习日语和日语翻译的需求也愈发强烈。为满足广大用户的需求&#xff0c;《Navi日语社》App应运而生&#xff0c;成为您日语学习与翻译的不二之选&#xff01; 日语翻译&#xff0c;准确无误。凭借先进的机器翻译技术&#xff0c;我们的App可…

Qt串口异步通信案例(从机线程)

文章目录 串口线程类初始化串口类打开串口并发送数据析构函数 窗口设置窗口函数实现 串口线程类 SlaveThread&#xff08;从机线程&#xff09; 目的&#xff1a;等待并响应来自主机的请求&#xff0c;然后发送预设的响应数据。 关键行为&#xff1a;线程启动后&#xff0c;通过…

打造爆款活动:确定目标受众与吸引策略的实战指南

身为一名文案策划经理&#xff0c;我深知在活动策划的海洋中&#xff0c;确定目标受众并设计出能触动他们心弦的策略是何等重要。 通过以下步骤&#xff0c;你可以更准确地确定目标受众&#xff0c;并制定出有效的吸引策略&#xff0c;确保活动的成功&#xff1a; 明确活动目…

C++线程任务队列模型

功能描述 实现一个任务队列&#xff0c;用于任务的执行 任务队列 任务队列可以添加、删除任务&#xff0c;实现对任务的管理添加任务后&#xff0c;任务队列可以开始执行任务队列执行任务方式为串行执行 任务 任务执行需要持续一段10s内随机的时间&#xff0c;执行过程通过…

npm install node-sass 安装失败的解决方案:利用国内镜像加速安装

在开发前端项目时&#xff0c;使用Sass作为CSS预处理器是很多开发者的选择。然而&#xff0c;在通过npm安装其Node.js绑定库node-sass时&#xff0c;一些开发者可能会遇到安装失败的问题&#xff0c;尤其是网络原因导致的下载缓慢或中断。本文将指导你如何通过更换为国内镜像源…

联邦和反射器实验

拓扑图 一.实验要求 1.AS1存在两个环回&#xff0c;一个地址为192.168.1.0/24&#xff0c;该地址不能在任何协议中宣告 AS3存在两个环回&#xff0c;一个地址为192.168.2.0/24&#xff0c;该地址不能在任何协议中宣告 AS1还有一个环回地址为10.1.1.0/24&#xff…

【kubernetes】关于k8s集群的污点、容忍、驱逐以及k8s集群故障排查思路

目录 一、污点(Taint) 1.1污点介绍 1.2污点的组成格式 1.3当前 taint effect 支持如下三个选项&#xff1a; 1.4污点的增删改查 1.4.1验证污点的作用——NoExecute 1.4.2验证污点的作用——NoSchedule 1.4.3 验证污点的作用——PreferNoSchedule 1.5污点的配置与管理…

Python散点图矩阵代码模版

本文分享Python seaborn实现散点图矩阵代码模版&#xff0c;节选自&#x1f449;嫌Matplotlib繁琐&#xff1f;试试Seaborn&#xff01; 散点图矩阵&#xff08;scatterplot matrix&#xff09;展示原始数据中所有变量两两之间关系&#xff0c;可以规避单一统计指标的偏差&…

[Algorithm][动态规划][子数组/子串问题][最大子数组和][环形子数组的最大和][乘积最大子数组][乘积为正数的最长子数组长度]详细讲解

目录 1.最大子数组和1.题目链接2.算法原理详解3.代码实现 2.环形子数组的最大和1.题目链接2.算法原理详解3.代码实现 3.乘积最大子数组1.题目链接2.算法原理详解3.代码实现 4.乘积为正数的最长子数组长度1.题目链接2.算法原理详解3.代码实现 1.最大子数组和 1.题目链接 最大子…

ClickHouse数据管理与同步的关键技术

2024年 5 月 18 日&#xff0c;ClickHouse官方首届杭州 Meetup 活动成功举行。本次活动由 ClickHouse 和阿里云主办&#xff0c;NineData 和云数据库技术社区协办。围绕ClickHouse的核心技术、应用案例、最佳实践、数据管理、以及迁移同步等方面&#xff0c;和行业专家展开交流…

UE5 读取本地图片并转换为base64字符串

调试网址&#xff1a;在线图像转Base64 - 码工具 (matools.com) 注意要加&#xff08;data:image/png;base64,&#xff09; FString UBasicFuncLib::LoadImageToBase64(const FString& ImagePath) {TArray<uint8> ImageData;// Step 1: 读取图片文件到字节数组if (!…

嵌入式linux系统中NFS文件系统挂载详细实现

大家好,今天主要给大家分享一下,如何利用linux系统实现NFS文件系统挂载的方式与实现。 第一:linux-NFS挂载的目的 1、掌握 Ubuntu 系统 NFS 文件共享服务的安装及配置 2. 掌握嵌入式 Linux 系统通过 NFS 共享服务和 X86 宿主机进行数据共享,文件共享的方法。 …

【Unity脚本】Unity中如何按类型查找游戏对象(GameObject)

【知识链】Unity -> 脚本系统 -> 访问游戏对象 -> 按类型访问游戏对象摘要&#xff1a;本文介绍了Unity中按类型查找游戏对象&#xff08;GameObject&#xff09;的五种方法&#xff0c;并提出了使用这些方法的最佳实践。 本文目录 一、访问游戏对象的方法二、如何按…