Vue3项目搭建教程
创始人
2024-03-04 10:30:59
0

找到一个你想要创建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项目目录结构如下图:
在这里插入图片描述

相关内容

热门资讯

修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
【前端】‘??‘与‘||‘有什... 0 问题 经常写const data = res.data.a ?? ''或者const d...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
牛客计算器的改良(Python... 文章目录1.题目描述2.输入描述:3.输出描述:4.示例15.分析6.代码7.结语 链接࿱...
正大杯|市调大赛|2023备赛... 关键信息 同时随着精细化养宠趋势的深入,宠物消费类目日渐丰富。 本报告通过 Niuco...
QGIS下载在线地图(Goog... 前言 国内外有很多在线地图下载软件,但功能单一,基本上只能下载数据&#x...