如何创建一个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.mzph.cn/diannao/18740.shtml

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

相关文章

迈向F5G-A,开启全光万兆新时代——南通移动完成全市首个50G-PON技术验证

近日&#xff0c;南通移动在崇川区完成全市首个50G-PON万兆技术现网验证&#xff0c;标志着南通成为首批具备F5G-A(The 5th GenerationFixed Network-advanced)的万兆光网城市&#xff0c;使其成为网速最快、覆盖最全、时延最低的城市之一。 作为全光万兆的关键技术&#xff0c…

ScrumMaster认证机构及CSM、PSM、RSM价值比较

企业现有的经营管理模式和传统的瀑布式交付模式&#xff0c;已经不能适应快速变化的市场响应和客户需求&#xff0c;现代的敏捷工作方式在过去数年涌现&#xff0c;比如Scrum&#xff0c;XP&#xff0c;看板&#xff0c;DevOps等敏捷方法&#xff0c;近十年Scrum在国内企业中备…

近200个幼儿启蒙简笔画含步骤图含音频

其实早就想搞一下简笔画的相关数据&#xff0c;但奈何几乎所有简笔画类的数据中的图片都有大大的水印&#xff0c;今天正好遇到一个启蒙简笔画的数据&#xff0c;好的地方是&#xff1a;简笔画步骤都是4步&#xff0c;步骤都有说明&#xff0c;步骤图片没有水印&#xff0c;每个…

一款拥有15000+POC漏洞扫描工具

1 工具介绍 0x01 免责声明 请勿使用本文中所提供的任何技术信息或代码工具进行非法测试和违法行为。若使用者利用本文中技术信息或代码工具对任何计算机系统造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责。本文所提供的技术信息或代码工具仅供于学习&am…

深入分析 Android Activity (十)

文章目录 深入分析 Android Activity (十)1. Activity 的资源管理1.1 使用资源 ID 访问资源1.2 Drawable 资源1.3 使用 TypedArray 管理资源1.4 使用资源配置 2. Activity 的数据存储2.1 SharedPreferences2.2 文件存储2.3 SQLite 数据库2.4 ContentProvider 3. Activity 的性能…

一书读懂Python全栈安全,剑指网络空间安全

写在前面 通过阅读《Python全栈安全/网络空间安全丛书》&#xff0c;您将能够全面而深入地理解Python全栈安全的广阔领域&#xff0c;从基础概念到高级应用无一遗漏。本书不仅详细解析了Python在网络安全、后端开发、数据分析及自动化等全栈领域的安全实践&#xff0c;还紧密贴…

力扣刷题---409. 最长回文串【简单】

题目描述 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回 通过这些字母构造成的 最长的回文串 。 在构造过程中&#xff0c;请注意 区分大小写 。比如 “Aa” 不能当做一个回文字符串。 示例 1: 输入:s “abccccdd” 输出:7 解释: 我们可以构造的最长的回文串…

JVM的垃圾回收机制--GC

垃圾回收机制&#xff0c;是java提供的对于内存自动回收的机制。java不需要像C/C那样手动free()释放内存空间&#xff0c;而是在JVM中封装好了。垃圾回收机制&#xff0c;不是java独创的&#xff0c;现在应该是主流编程语言的标配。GC需要消耗额外的系统资源&#xff0c;而且存…

Codeforces Round 946 (Div. 3) A~G

A.Phone Desktop (枚举) 题意&#xff1a; 小 A A A的手机有一个桌面&#xff08;或称启动器&#xff09;。桌面可以由多个屏幕组成。每个屏幕表示为大小为 5 3 5 \times 3 53 的网格&#xff0c;即五行三列。 有 x x x 个应用程序的图标大小为 1 1 1 \times 1 11 个单…

学前基础知识

1、Java版本&#xff1a; 1995年发布第一个版本&#xff0c;创始人gosling。 可知&#xff0c; JAVA8 和 JAVA11 为长期版本&#xff0c;其他均非长期版本&#xff0c;因此主流都在用 JAVA8 或 JAVA11。 2、Java技术体系平台&#xff1a; 3、Java重要特点 ①Java语言是面向对象…

【IDEA】Redis可视化神器

在开发过程中&#xff0c;为了方便地管理 Redis 数据库&#xff0c;我们可能会使用一些数据库可视化插件。这些插件通常可以帮助你在 IDE 中直观地查看和管理 Redis 数据库&#xff0c;包括查看键值对、执行命令、监视数据库活动等。 IDEA作为IDE界的Jenkins&#xff0c;本身自…

游戏联运的挑战与核心关键点

​游戏联运一个看似充满机遇与挑战的行业&#xff0c;吸引了很多创业者的加入。然而&#xff0c;真正踏入这个行业后&#xff0c;许多人会发现&#xff0c;手游代理并非想象中的那么简单。今天&#xff0c;溪谷软件就来和大家聊聊游戏联运是怎么做的&#xff0c;需要注意什么。…

HTTP请求拦截器链

文章目录 HTTP请求拦截器链需求定义写一个Controller方法接口写三个http请求拦截器把拦截器加入到配置中&#xff0c;并且配置拦截规则在postman里面发送请求&#xff0c;看下测试结果是否正确 HTTP请求拦截器链 需求定义 我们写一个包含三个HTTP请求拦截器的拦截器链&#x…

MongoDB数据库(10亿条数据)清理策略: 自动化过期数据删除实战

1、引言 随着应用程序和业务数据的持续增长&#xff0c;有效地管理数据库存储空间成为维护系统性能的关键。在MongoDB这类NoSQL数据库中&#xff0c;定期清理过期数据变得尤为重要&#xff0c;这不仅能释放宝贵的存储资源&#xff0c;还能优化查询性能&#xff0c;确保数据库运…

PS:电子书App自动截图后合成一个PDF文档

说明&#xff1a;有的电子书App不能下载到本地&#xff0c;通过自动截图后合成一个PDF文档来解决&#xff01; 一、自动截图App 1.安装”免ROOT自动化助手“ 2.创建一个任务 3.编辑任务&#xff1a;根据电子书的操作顺序制定&#xff0c;400次就是书籍页数&#xff08;次数一…

【Jmeter】性能测试之压测脚本生成,也可以录制接口自动化测试场景

准备工作-10分中药录制HTTPS脚本&#xff0c;需配置证书 准备工作-10分中药 以https://www.baidu.com/这个地址为录制脚本的示例。 录制脚本前的准备工作当然是得先把Jmeter下载安装好、JDK环境配置好、打开Jmeter.bat&#xff0c;打开cmd&#xff0c;输入ipconfig&#xff0c;…

Vitis HLS 学习笔记--块级控制协议-ap_ctrl_chain/ap_ctrl_hs/ap_ctrl_none

目录 1. 简介 2. 详细分析 2.1 使用场景区别 2.2 ap_continue 行为详解 2.3 ap_ctrl_chain 行为详解 3. 总结 1. 简介 块级控制协议允许硬件模块表明&#xff1a; 何时可以开始处理数据。何时完成了数据处理。以及何时处于空闲状态&#xff0c;准备接受新的数据输入。 …

这么多不同接口的固态硬盘,你选对了嘛!

固态硬盘大家都不陌生,玩游戏、办公存储都会用到。如果自己想要给电脑或笔记本升级下存储,想要存储更多的文件,该怎么选购不同类型的SSD固态盘呐,下面就来认识下日常使用中常见的固态硬盘。 固态硬盘(Solid State Drive, SSD)作为数据存储技术的革新力量,其接口类型的选…

【深度 Q 学习-01】 Q学习概念和python实现

文章目录 一、说明二、深度 Q 学习概念三、python实现四、结论 关键词&#xff1a;Deep Q-Networks 一、说明 在强化学习 &#xff08;RL&#xff09; 中&#xff0c;Q 学习是一种基础算法&#xff0c;它通过学习策略来最大化累积奖励&#xff0c;从而帮助智能体导航其环境。它…

气膜建筑的运营成本解析:高效节能的运作模式—轻空间

气膜建筑以其独特的优势和广泛的应用吸引了大量关注。然而&#xff0c;许多人对其持续吹气的运营成本产生了疑问。实际上&#xff0c;气膜建筑通过智能控制系统和高效的风机管理&#xff0c;大大降低了运营成本。本文将以2000平方米的气膜建筑为例&#xff0c;详细解析其运行成…