vue3 快速入门 (一) : 环境配置与搭建

1. 本文环境

  • Vue版本 : 3.4.29
  • Node.js版本 : v20.15.0
  • 系统 : Windows11 64位
  • IDE : VsCode

2. 安装Node.Js

首先,我们需要安装Node.Js。Node.js提供了运行 JavaScript 代码的环境。并且Node.js 带来了 npm,它是JavaScript世界的包管理工具。开发vue时,可以使用 npm 来安装、管理和共享各种依赖。

安装Node.js时,npm会作为默认包管理工具一同安装。

3. 安装Vue

打开CMD命令行,运行如下代码,创建一个新的vue项目

npm create vue@latest

会有一些可选项,这里我们可以选择使用TypeScript

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … 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
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / YesScaffolding project in ./<your-project-name>...
Done.

新建完成后,进入项目根目录

cd <your-project-name>

安装项目所需依赖

npm install

运行项目

npm run dev

这里时候,我们可以看到http://localhost:5173/这个URL

在这里插入图片描述

复制这个URL到浏览器,可以看到如下画面,说明项目启动成功了

在这里插入图片描述

4. 安装VSCode

4.1 安装VSCode

下载地址 : https://code.visualstudio.com/

4.2 安装Vue - Official插件

这是个官方的vue插件,支持语法高亮、代码提示、代码模板等功能

在这里插入图片描述

4.3 修改为IntelliJ的快捷键

可以安装 IntelliJ IDEA Keybindings 插件 ,将VSCode的快捷键改为InteliJ的快捷键 (我用习惯了)
如果没有这个习惯,也不可以不修改。

具体看这篇文章 : visual studio code-webstorm的快捷键映射_webstorm按钮映射应该选什么-CSDN博客

pkWTSeS.md.png

5. 安装Chrome

Chrome浏览器下载地址 : https://www.google.cn/intl/zh-CN/chrome/

5.1 Chrome安装Vue插件

进入这个网站 : 极速插件 : 安装Chrome插件,下载vue.js devtools插件,并解压。
Chrome进入扩展扩展程序页面,开启开发者模式。
将解压后的插件拖入管理扩展程序页面,安装完成。

具体详见这篇文章 : 下载、编译、安装、使用 vue-devtools

vue.js devtools插件的作用
安装完成后,就可以在Chrome的开发者工具里看到Vue这一项了。
可以用来看Vue 应用程序中所有组件的层级关系和状态,以及还有很多方便开发调试Vue的功能。

在这里插入图片描述

5.2 chrome 移动端页面调试

在Chrome中,点击F12,进入如下页面,通过点击Toggle device toolbar,切换至移动Web调试模式。

在这里插入图片描述
具体详见 : chrome 移动Web H5 调试

6. vue快速入门系列文章

vue3 快速入门 (一) : 环境配置与搭建
vue3 快速入门 (二) : 实现第一个Vue网页,并在手机上浏览

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

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

相关文章

使用Copilot 高效开发繁忙的一天

在现代软件开发的世界里&#xff0c;使用AI工具如GitHub Copilot可以显著提高开发效率。 早晨&#xff1a;规划与启动 7:00 AM - 起床与准备 开发者早早起床&#xff0c;享用健康的早餐&#xff0c;并浏览新闻和技术博客&#xff0c;了解最新的科技动态。快速整理思路&#x…

MICS2024|少样本学习、多模态技术以及大语言模型在医学图像处理领域的研究进展|24-07-14

小罗碎碎念 本期推文主题 今天的会议很多主题都集中在大模型、多模态这两个方面&#xff0c;很明显&#xff0c;这两个方向都是目前的研究热点。 所以&#xff0c;我这一期推文会先简单的分析一下秦文健&#xff08;中科院&#xff09;和史淼晶&#xff08;同济大学&#xff09…

【STM32开发笔记】搭建VSCode+PyOCD的STM32开发环境

【STM32开发笔记】搭建VSCodePyOCD的STM32开发环境 一、安装软件1.1 安装STM32CubeMX1.2 安装VSCode1.3 安装Arm GNU Toolchain1.4 安装Make for Windows1.5 安装Python1.6 安装PyOCD 二、安装插件2.1 VSCode插件2.2 PyOCD支持包 三、创建项目3.1 创建STM32CubeMX项目3.2 查阅原…

口袋算法的示例

原理 口袋算法是感知器(Perceptron)算法的一种改进。感知器算法是一种线性分类算法,但在训练数据不是线性可分的情况下,它可能无法收敛,即无法找到一个线性分类器来正确分类所有的训练样本。为了解决这个问题,口袋算法引入了一个"口袋"(Pocket),用来存储迄…

【Java】字符与字符串

文章目录 1.字符char1.1 编码1.2 转义字符1.3 char的类型转换1.4 字符的比较1.5 Character类 2.String类型2.1 String对象常用的方法&#xff1a;2.2 从控制台读取字符串2.3 从控制台读取字符2.4 字符串的比较2.5 子串和字符2.6 字符串的转化2.7 格式化控制台输出 1.字符char …

IOT 可编程控制系统

IOT&#xff08;物联网&#xff09;可编程控制系统&#xff0c;如GF-MAXCC等&#xff0c;是一种集成了多种先进技术和功能的智能化控制设备&#xff0c;它能够在物联网系统中发挥关键作用&#xff0c;实现对多种设备的集中管理和控制。具体来说&#xff0c;IOT可编程控制系统的…

【算法专题】双指针算法之 1089.复写零(力扣)

欢迎来到 CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a;双指针算法之 1089.复写零&#xff08;力扣&#xff09; &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Linux | 算…

2024版彩虹晴天全能知识付费源码+虚拟商城解决方案 含一键搭建视频教程 无授权限制

是一款知识付费平台的核心&#xff0c;更是集虚拟商城、实物交易、代理分销于一体的全能解决方案。 核心亮点&#xff1a; 最新源码&#xff0c;独家首发&#xff1a;经过精心修复与更新&#xff0c;本源码由我们团队亲自把关&#xff0c;确保您获得的是市场上最新鲜、最稳定…

DBA 数据库管理 表管理 数据批量处理。表头约束

表管理 建库 库名命名规则&#xff1a;仅可以使用数字、字母、下划线、不能纯数字 不可使用MySQL命令或特殊字符 库名区分字母大小写 加if not exists 命令避免重名报错 create database if not exists gamedb; 建表 drop database if exists gamedb ; 删表…

【论文阅读】LLM4GCL: CAN LARGE LANGUAGE MODEL EMPOWER GRAPH CONTRASTIVE LEARNING?

LLM4GCL: CAN LARGE LANGUAGE MODEL EMPOWER GRAPH CONTRASTIVE LEARNING? https://openreview.net/forum?idwxClzZdjqP 图对比学习的重点就是图数据的增强&#xff0c;针对图中节点的表示或者图的结构进行扰动&#xff0c;通过对比学习得到对应的节点表示&#xff0c;以便于…

Kafka基础入门-代码实操

Kafka是基于发布/订阅模式的消息队列&#xff0c;消息的生产和消费都需要指定主题&#xff0c;因此&#xff0c;我们想要实现消息的传递&#xff0c;第一步必选是创建一个主题&#xff08;Topic&#xff09;。下面我们看下在命令行和代码中都是如何创建主题和实现消息的传递的。…

【Linux 配置静态IP】Ubuntu20.04

最近学习网络编程&#xff0c;为了方便学习需要Ubuntu配置静态IP&#xff0c;网上看了好多贴子跟着试了下可以实现&#xff0c;但重启虚拟机后有时就无法连接&#xff0c;总之各种各样问题&#xff1b;相关的配置方法也比较凌乱&#xff0c;有用netplan 或者 ifupdown ,笔者简单…

C++知识点:C和C++(自用)

C和C 1.类和结构体的关系&#xff1a;2.面向对象和面向过程3.头文件和标准命名空间4.cin和cout5. const在C中和C中的区别6.const全局作用域7 new和delete8 内联函数9 函数重载10. 函数重载的匹配 引用&#xff1a; [1]C语言中文网 1.类和结构体的关系&#xff1a; 类是结构体的…

Qt文件下载工具

在Qt中实现文件下载功能&#xff0c;通常可以通过多种方式来完成&#xff0c;包括使用 QNetworkAccessManager 和 QNetworkReply 类&#xff0c;或者使用更高级别的 QHttpMultiPart 类。以下是两种常见的实现方法&#xff1a; 方法1&#xff1a;使用 QNetworkAccessManager 和…

pxe高效网络批量装机

文章目录 一&#xff0c; PXE远程安装服务&#xff08;一&#xff09;三种系统装机的方式&#xff08;二&#xff09;linux装机1. 加载 Boot Loader2. 加载启动安装菜单3. 加载内核和 initrd4. 加载根文件系统5. 运行 Anaconda 安装向导 &#xff08;三&#xff09;实现过程&am…

语言主要是一种交流工具,而不是思维工具?GPT5何去何从?

引言 在人工智能领域&#xff0c;特别是大语言模型&#xff08;LLM&#xff09;的发展中&#xff0c;语言和思维的关系一直是一个备受关注的话题。近期&#xff0c;麻省理工学院&#xff08;MIT&#xff09;在《Nature》杂志上发表了一篇题为《Language is primarily a tool f…

linux进程——概念理解与PCB

前言&#xff1a;本篇讲解Linux进程概念相关内容。 操作系统被称为计算机世界的哲学&#xff0c; 可以见得操作系统的知识并不好理解。 对于这篇进程概念的讲解&#xff0c; 博主认为&#xff0c; 如果没有一些前置知识的话&#xff0c;里面的有些概念并不好理解。 但是如果学习…

SQL Server 用户应当如何防范 Mallox (.hmallox) 勒索软件袭击

勒索软件领域的特点是随着时间的流逝&#xff0c;参与者群体和恶意软件家族都会大量流失&#xff0c;只有少数参与者表现出相对长寿的寿命。曾经令人担忧的威胁&#xff0c;如 REvil 和 Conti&#xff0c;要么被铲除&#xff0c;要么被解散&#xff0c;而其他威胁——例如 ALPH…

UGUI优化篇(更新中)

UGUI优化篇 1. 基础概念2. 重要的类1. MaskableGraphic类继承了IMaskable类2. 两种遮罩的实现区别RectMask2DMask 3. 渲染部分知识深度测试深度测试的工作原理 渲染队列透明物体在渲染时怎么处理为什么透明效果会造成性能问题 1. 基础概念 所有UI都由网格绘制的如image由两个三…

25届平安产险校招测评IQ新16PF攻略:全面解析与应试策略

尊敬的读者&#xff0c;您好。随着平安产险校招季的到来&#xff0c;许多应届毕业生正积极准备着各项测评。本文旨在提供一份详尽的测评攻略&#xff0c;帮助您更好地理解平安产险的校招测评流程&#xff0c;以及如何有效应对。 25届平安产险平安IQ&#xff08;新&#xff09;测…