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

news/2024/6/21 5:05:29/文章来源:https://blog.csdn.net/m0_74249400/article/details/139261897
  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.ldbm.cn/p/430406.html

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

相关文章

qq音乐sign逆向

qq音乐sign参数逆向 1.概览 参数sign长度40 多次调试发现&#xff0c;前缀zzb不变 2.打日志 跟站发现是vpm&#xff0c;在apply调用打上日志断点&#xff1a; 连蒙带猜知道&#xff0c;最终字符串四部分构成&#xff0c;zzb 24DC2798 HI0TvE4tOMqzN4w88oZCjQ EE0A88FE 1.把…

pelican,一个超强的 Python 库!

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - pelican。 Github地址&#xff1a;https://github.com/getpelican/pelican 在当今数字化时代&#xff0c;博客已经成为个人和企业分享信息、展示成果的重要途径。静态网站…

ROS基础学习-话题通信机制研究

研究ROS通信机制 研究ROS通信机制 0.前言1.话题通信1.1 理论模型1.2 话题通讯的基本操作1.2.1 C++1.2.2 Python中使用自己的虚拟环境包1.2.2.1 参考11.2.2.2 参考21.2.2.3 /usr/bin/env:“python”:没有那个文件或目录1.2.3 Python1.2.2.1 发布方1.2.2.2 订阅方1.2.2.3 添加可执…

使用 Spring HATEOAS 开发 REST 服务-浅显的理解

随笔&#xff0c;简单理解 一、restful是什么 1、第一层次&#xff08;Level 0&#xff09;的 Web 服务只是使用 HTTP 作为传输方式&#xff0c;实际上只是远程方法调用&#xff08;RPC&#xff09;的一种具体形式。 SOAP 和 XML-RPC 都属于此类 2、第二层次&#xff08;Lev…

网络原理-HTTPS协议

在前面说到HTTP中,我们通过抓包,可以看到许多信息内容,其中往往会包含一些敏感信息,这些都是明文传输,当我们的请求被黑客或者不法分子截获后,那就很危险了,因此衍生出了HTTPS协议来对传输数据进行加密。 一、加密原理 基本原理如下&#xff1a; 明文 密钥 > 密文 密文…

Java日志体系概述

一. 日志体系分类 1.1 功能分类 1.2 jar包分类 二. 以log4j2为例 2.1 slf4j-api的初始化动态绑定过程 一. 日志体系分类 1.1 功能分类 门面类 slf4j&#xff1a;Simple Logging Facade for Java&#xff0c;为java提供的简单日志Facade具体实现类 logbacklog4j1log4j2jul&…

【RLHF个人笔记】RLHF:Reinforcement Learning from Human Feedback具体过程

【RLHF个人笔记】RLHF:Reinforcement Learning from Human Feedback具体过程 RLHF训练的三个步骤步骤1&#xff1a;收集数据与有监督训练策略步骤2&#xff1a;收集数据训练奖励模型步骤3&#xff1a;结合奖励模型利用强化学习算法如PPO算法来优化策略 参考内容 RLHF训练的三个…

git教程(IDEA + 命令行)

首先假设你已经安装 git 且 已经初始化完成&#xff1a; // 初始化git config --global user.name "你的用户名" git config --global user.email "你的邮箱"在当前文件夹下创建一个仓库&#xff0c;且该文件夹下会有多个项目 首先在当前文件夹下新建git…

平方回文数-第13届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第73讲。 平方回文数&#…

Java基础:异常(三)

Java基础&#xff1a;异常&#xff08;三&#xff09; 文章目录 Java基础&#xff1a;异常&#xff08;三&#xff09;1. Java异常体系1.1 错误的分类1.2 异常的分类 2. 异常的捕获与处理2.1 try-catch2.2 finally 3. 异常的抛出4. 自定义异常 1. Java异常体系 Java的异常体系是…

【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析

&#x1f525; 个人主页&#xff1a;空白诗 &#x1f525; 热门专栏&#xff1a;【JavaScript】 文章目录 &#x1f33f; 引言五、 Destructuring Assignment - 解构赋值&#xff0c;数据提取的艺术 &#x1f3a8;&#x1f4cc; 数组解构&#x1f4cc; 对象解构&#x1f4cc; 特…

打造高可用系统:深入了解心跳检测机制

本文作者:小米,一个热爱技术分享的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello,大家好!我是你们的技术小伙伴小米,今天咱们来聊聊分布式系统中的“心跳检测”机制。心跳检测是一种简单而又重要的机制,用来监控系统的…

JAVA系列:NIO

NIO学习 一、前言 先来看一下NIO的工作流程图&#xff1a; NIO三大核心组件&#xff0c;channel&#xff08;通道&#xff09;、Buffer&#xff08;缓冲区&#xff09;、selector&#xff08;选择器&#xff09;。NIO利用的是多路复用模型&#xff0c;一个线程处理多个IO的读…

线上自由DIY预约小程序源码系统 自由DIY你的界面 带完整的的安装代码包以及搭建教程

系统概述 在当今数字化时代&#xff0c;移动应用成为人们生活和工作中不可或缺的一部分。预约小程序作为一种便捷的工具&#xff0c;为用户提供了高效的预约服务体验。而线上自由 DIY 预约小程序源码系统则为开发者和企业提供了更大的自由度和创造力&#xff0c;让他们能够根据…

新品发布(仓库小助手)一机在手,轻松无忧

你是否曾为繁琐的货物管理而烦恼&#xff1f; 你是否为了记录货物信息忙前忙后&#xff1f; 近几年&#xff0c;陆续有收到客户在运营跨境代购中的一些反馈&#xff0c;特别是仓库管理这块&#xff0c;比如包裹的出入库、移库、修改包裹信息等&#xff0c;都需要在电脑上完成&…

【做一道算一道】力扣332.重新安排行程

332.重新安排行程 给定一个机票的字符串二维数组 [from, to]&#xff0c;子数组中的两个成员分别表示飞机出发和降落的机场地点&#xff0c;对该行程进行重新规划排序。所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&#xff0c;所以该行程必…

时间|基于SprinBoot+vue的时间管理系统(源码+数据库+文档)

时间管理系统 目录 基于SprinBootvue的时间管理系统 一、前言 二、系统设计 三、系统功能设计 1管理员功能模块 2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农…

Linux服务器安装与配置python环境 最新linux安装python 小白教程

目录 一、下载官网的安装包 二、安装流程 三、配置软连接&#xff08;类似window系统的环境变量&#xff09; 四、可能会出现的问题&#xff1a; 1.ssl连接问题&#xff0c;下图所示&#xff1a; 一、下载官网的安装包 1.官网安装包地址&#xff1a;https://www.python.org/…

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

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

nss刷题(3)

1、[SWPUCTF 2021 新生赛]include 根据提示传入一个file后显示了关于flag的代码 这是一个文件包含&#xff0c;考虑php伪协议&#xff0c;构造payload&#xff1a; ?filephp://filter/readconvert.base64-encode/resourceflag.php 2、[SWPUCTF 2021 新生赛]Do_you_know_http …