Vue3项目搭建教程

news2024/11/28 12:39:03

找到一个你想要创建Vue项目的目录(本文以C:\Users\XTT\Desktop\新建文件夹\project为例)。在此目录打开命令行,输入以下命令:
在这里插入图片描述

回车,如果是第一次用这种方式创建Vue3项目,命令行会提示安装 create-vue 包,如下图:
在这里插入图片描述

输入【y】,确认安装。安装完成后会自动进入Vue项目创建,如下图:
在这里插入图片描述
接下来会让我们依次输入以下几个问题的答案,帮助创建项目:

Project name:项目名称,默认值:vue-project,可输入想要的项目名称,此处不建议中文。
Add TypeScript? 是否加入TypeScript组件?默认值:No。
Add JSX Support? 是否加入JSX支持?默认值:No。
Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。
Add Pinia for state management? 是否添加Pinia组件来进行状态管理?默认值:No。
Add Vitest for Unit testing? 是否添加Vitest来进行单元测试?默认值:No。
Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试?默认值:No。
Add ESLint for code quality? 是否添加ESLint来进行代码质量检查?默认值:No。

在这里插入图片描述
完成以上步骤,一个全新的Vue3项目就创建好了。
接下来可以按照提示,启动项目。
在VCSode中打开刚创建的Vue项目目录,如下图:
在这里插入图片描述
在这里插入图片描述
打开终端,输入以下指令:

npm install

显示:
在这里插入图片描述
输入命令:

npm run dev

显示:
在这里插入图片描述
看到以上提示,项目启动成功。
打开浏览器,在地址栏输入 http://localhost:5173 即可打开项目。全新的Vue3初始页面,如下图:
在这里插入图片描述
到此为止,我们的Vue3项目就搭建完成了。新建的Vue3项目目录结构如下图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/49501.html

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

相关文章

sharedPtr

shared_ptr 1.以何种方式传递 通过下列方式将 shared_ptr 传递给其他函数: 按值传递 shared_ptr。 这将调用复制构造函数,增加引用计数,并使被调用方成为所有者。 此操作的开销很小,但此操作的开销可能很大,具体取决…

python小游戏编程arcade----坦克动画图片合成

python小游戏编程arcade----坦克动画图片合成前言坦克动画图片合成1、PIL image1.1 读取文件并转换1.2 裁切,粘贴1.3 效果图1.4 代码实现2、处理图片的透明度问题2.1 past 函数的三个参数2.2 注意点12.3 注意点22.4 效果![在这里插入图片描述](https://img-blog.csd…

Android中简单使用aspectj

Android中简单使用aspectj 前言: 面向切面编程(AOP是Aspect Oriented Program的首字母缩写),这种在运行时,动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程. 1.简介: 在Android中使用注解…

48、线程

一、线程相关概念: 1、程序(program): 是为完成特定任务、用某种语言编写的一组指令的集合,即我们写的代码。 2、进程: (1)进程是指运行中的程序,比如我们使用QQ&…

✿✿✿JavaScript --- BOM、DOM对象

目 录 一、BOM浏览器对象模型 1.Window窗口对象 (1)与弹出有关的方法 (2)与定时器有关的方法 (3)与打开关闭有关的方法 (4) 获取其他对象的属性 2.Location地址栏对象 3.History历史记录对象 二、DOM文档对象模型 1.Document文档对象 (1)获取Element对象 (2)创建…

如何理解CRC循环冗余校验——图解CRC算法模型和C语言实现

如何理解CRC循环冗余校验 循环冗余校验(英语:Cyclic redundancy check,通称“CRC”)是一种产生定长校验码的算法,主要用来检测或校验数据传输或者保存后可能出现的错误。 它真的太常见了,上至应用软件通信…

Qt QCustomPlot 点状网格线实现和曲线坐标点拾取

Qt QCustomPlot 点状网格线实现和曲线坐标点拾取 文章目录Qt QCustomPlot 点状网格线实现和曲线坐标点拾取摘要我想实现的效果点阵的实现第一版本,使用QPen Style第二版本,通过设置背景第三版本,回到QPen Style取曲线上的点关键字&#xff1a…

[附源码]Python计算机毕业设计Django电影推荐网站

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

【附源码】计算机毕业设计JAVA助农脱贫系统

【附源码】计算机毕业设计JAVA助农脱贫系统 目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: JAVA mybati…

cpu设计和实现(异常和中断)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 异常和中断几乎是cpu最重要的特性。而异常和中断,本质上其实是一回事。很多熟悉mips的朋友,应该都听过这么一个词&#xff…

算法竞赛入门【码蹄集进阶塔335题】(MT2291-2295)

算法竞赛入门【码蹄集进阶塔335题】(MT2291-2295) 文章目录算法竞赛入门【码蹄集进阶塔335题】(MT2291-2295)前言为什么突然想学算法了?为什么选择码蹄集作为刷题软件?目录1. MT2291 饿饿!饭饭!2. MT2292 甜甜花的研究3. MT2293 赌…

【2013NOIP普及组】T4. 车站分级 试题解析

【2013NOIP普及组】T4. 车站分级 试题解析 时间限制: 1000 ms 内存限制: 131072 KB 【题目描述】 一条单向的铁路线上,依次有编号为 1,2,…,n 的 n 个火车站。每个火车站都有一个级别,最低为 1 级。现有若干趟车次在这条线路上行驶,每一趟都满足如下要求:如果这趟…

护眼灯真的有用吗?2022双十二选哪个牌子的护眼台灯好

护眼灯对保护眼睛是真的有用,它不是那种如医学奇迹般的治疗眼睛疾病,或者降低近视度数等等,这样的伪科学只会让人觉得是智商税。护眼灯的作用原理很简单也很有效,即通过各种方法提高光线的舒适度,使人眼在晚上长时间工…

厦门市会展局携手美创:以数据为核心的安全建设守护“云上会展”

新冠疫情影响下,会展业与云计算、大数据、物联网等数字技术加速融合,“云上会展”成为新趋势。然而风口之下,高价值的展会敏感数据无时不面临着被窃取、攻击的风险。因此,成熟配套的数据安全能力体系建设,也是会展业创…

Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频

前言 哇咔咔,这是我的第20篇Monaco教程,写完这一篇会暂时休息一段时间,练练字,存存稿,读读书,顺便修修文章。 目前全网成系统的monaco中文专栏应该只有我这一个,欢迎评论区打脸。自结束了GitLa…

面试题------线程池的拒绝策略

面试题------线程池的拒绝策略 线程池有7个核心参数 1.核心线程数 2.最大线程数 3.非核心线程存活时间 4.存活时间的单位 5.工作队列 6.线程自定义的一些配置 7.拒绝策略(当达到最大线程数、且工作队列也满了会执行拒绝策略) public ThreadPoolExecutor…

马上2023年了,学一下gradle(Gradle)安装及配置

Gradle学习 例如:相信已经很多公司在用了,但是小伙伴对此还是很模糊 文章目录Gradle学习Gradle一、Gradle介绍?二、常见的项目构建工具gradle安装1.下载2. 配置(环境变量)2.1打开环境变量2.2**新建环境变量**2.3在Pat…

【C++】STL—vector的常用接口

文章目录前言一、vector介绍二、vector的使用1. vector的定义2. vector的遍历2.1.operator[ ]2.2.迭代器2.3.范围for3. vector的空间增长问题3.1.size和capacity3.2.max_size和empty3.3.reserve3.4.resize3.5.Shrink to fit4. vector的增删查改4.1.push_back和pop_backinsert和…

Vue 3的高颜值UI组件库

Vue 3.0 已经发布两年多的时间,今年 2 月 Vue 3.0 也正式成为新的默认版本。今天就来分享 7 个适用于 Vue 3 的高颜值 UI 组件库! Element Plus Element Plus 是一套由饿了么开源出品的为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库。Elemen…

【能源管理】制造行业中汽车厂房综合能效管理平台应用分析

安科瑞 李亚俊 平台概述 壹捌柒贰壹零玖捌柒伍柒AcrelEMS-EV汽车厂房能效管理平台集变电站综合自动化、电力监控、电气安全、电能质量分析及治理、能耗管理、能效分析、照明控制、充电桩运营管理、设备运维于一体,为建立可靠、安全的工厂能源管理体系提供数据支持…