Vue.js学习笔记(1)——Visual Studio Code搭建Vue.js框架

1 安装Node.js

1、下载安装包:进入官网(https://nodejs.org/en),下载左侧的稳定版。
在这里插入图片描述

2、选择安装位置,不用勾选自动安装必要工具。
其他都默认Next。
在这里插入图片描述
配置环境,具体参考本文章:

https://blog.csdn.net/WHF__/article/details/129362462

2 创建Vue.js项目

官网链接:

https://cn.vuejs.org

1、点击安装,跟着教程一步步输入指令。

https://cn.vuejs.org/guide/quick-start.html

在这里插入图片描述

2、部署第一个Vue.js项目:
使用管理员身份进入命令行,首先选择合适的文件夹位置,然后输入:

npm create vue@latest

然后设置项目名称与项目方案。

vuejs_test001
test_package
回车(都是否)
cd vuejs_test001

安装依赖包:

npm install

在这里插入图片描述
3、启动Vue 服务器(关闭此命令行界面,服务器就关闭了):

npm run dev

在这里插入图片描述
输入h可以查看帮助。
输入q可以关闭服务器。

4、检验Vue是否搭建成功,在浏览器中输入:

http://localhost:5173/

在这里插入图片描述

3 Visual Studio Code内测试

1、打开刚才创建的文件夹:
在这里插入图片描述
2、按下 ctrl+` ,打开终端,输入:

npm run dev

在这里插入图片描述
按住ctrl,点击网址链接,即可打开同样的网页。

在这里插入图片描述

待修改 安装Visual Studio

1、安装Visual Studio Community,选择Node.js开发。
注意自己选择安装位置。
在这里插入图片描述
安装完成后重启电脑,打开软件。

2、新建项目:
在这里插入图片描述

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

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

相关文章

性能测试-jmeter:安装 / 基础使用

一、理解jmeter 官网-Apache JMeter-Apache JMeter™ JMeter是一款开源的性能测试工具,主要用于模拟大量用户并发访问目标服务器,以评估服务器的性能和稳定性。 JMeter可以执行以下任务序号用途描述1性能测试通过模拟多个用户在同一时间对服务器进行请…

Markdown之EBNF语法介绍(二十七)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

2023 年中国金融级分布式数据库市场报告:TiDB 位列领导者梯队,创新能力与增长指数表现突出

近日,沙利文联合头豹研究院发布了中国数据库系列报告之《2023 年中国金融级分布式数据库市场报告》。 报告认为,金融行业对于分布式数据库信任度与认可度正在逐步提高,中国金融级分布式数据库市场正处于成熟落地的高增长阶段,行业…

Ubuntu安装K8S的dashboard(管理页面)

原文网址:Ubuntu安装k8s的dashboard(管理页面)-CSDN博客 简介 本文介绍Ubuntu安装k8s的dashboard(管理页面)的方法。 Dashboard的作用有:便捷操作、监控、分析、概览。 相关网址 官网地址:…

Android Studio如何创建尺寸大小及API通用的模拟器

目录 前言 一、操作步骤 二、总结 三、更多资源 前言 在开发移动应用程序的过程中,使用模拟器进行测试是一种常见和方便的方式。Android Studio是一款功能强大的集成开发环境,它提供了创建和管理模拟器的功能。在本文中,我们将介绍如何创…

前端三件套html/css/js的基本认识以及示例程序

简介 本文简要讲解了html,css,js.主要是让大家简要了解网络知识 因为实际开发中很少直接写html&css,所以不必过多纠结,了解一下架构就好 希望深度学习可以参考MDN和w3school HTML 基础 HTML (Hyper Text Markup Language) 不是一门编程语言,而是一种用来告知浏览器如…

【Java】log4j和slf4j区别

log4j:Apache Software Foundation 开源 slf4j:不支持日志滚动等高级功能 在开源库或内部库中使用 SLF4J,将使其独立于任何特定的日志记录实现,这意味着无需为多个库管理多个日志记录配置,您的客户端将会很需要这一点…

5G智慧港口简述

港口作为交通运输的枢纽,在促进国际贸易和地区发展中起着举足轻重的作用,全球贸易中约 90% 的贸易由海运业承载,作业效率对于港口至关重要。在“工业 4.0”、“互联网 +”大发展的时代背景下,港口也在进行数字化、全自动的转型升级。随着全球 5G 技术浪潮的到来,华为、振华…

LOAM: Lidar Odometry and Mapping in Real-time 论文阅读

论文链接 LOAM: Lidar Odometry and Mapping in Real-time 0. Abstract 提出了一种使用二维激光雷达在6自由度运动中的距离测量进行即时测距和建图的方法 距离测量是在不同的时间接收到的,并且运动估计中的误差可能导致生成的点云的错误配准 本文的方法在不需要高…

javascript 常见事件

简介: JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式…

02 HAL库驱动按键响应外部中断

引言:这里我采用的实验平台可能跟大家的不太一样,文章的图像是一块资源拓展板, 主控板式fs_mp1a, 该板子的SOC是stm32mp157a, 有两个内核一个A7, 一个M4.但是实验的流程肯定都是一样的, 因为都是裸机程序嘛…

html文件Js写输入框和弹框调接口jQuery

业务场景&#xff1a;需要使用写一个html文件&#xff0c;实现输入数字&#xff0c;保存调接口。 1、使用 JS原生写法&#xff0c; fetchAPI调接口&#xff0c;使用 alert 方法弹框会阻塞线程&#xff0c;所以写了一个弹框。 <!DOCTYPE html> <html lang"en"…

Android Studio下载gradle失败

1、打开Android Studio设置Gradle的地方&#xff0c;点击左上角的File->Settings查看gradle存放路径 C:\Users\Administrator.gradle\wrapper\dists\gradle-5.4.1-all\3221gyojl5jsh0helicew7rwx 2、找到正在下载的gradle版本&#xff0c;Android Studio取消下载gradle&…

JVM的生命周期

1.加载&#xff08;Loading&#xff09;&#xff1a; 在加载阶段&#xff0c;JVM会找到并加载Java字节码文件。加载阶段分为三个步骤&#xff1a;通过类的全限定名找到对应的字节码文件&#xff0c;创建一个与该类相关的Class对象&#xff0c;将类的静态数据结构存储在方法区中…

uniapp中uview组件库的丰富Upload 上传上午用法

目录 基础用法 #上传视频 #文件预览 #隐藏上传按钮 #限制上传数量 #自定义上传样式 API #Props #Methods #Slot #Events 基础用法 可以通过设置fileList参数(数组&#xff0c;元素为对象)&#xff0c;显示预置的图片。其中元素的url属性为图片路径 <template>…

【Image】超硬核数学推导——WGAN的先“破”后“立”

GAN的实现 上一篇文章中我们说到了GAN的数学解释 min ⁡ G max ⁡ D V ( D , G ) E x ∼ p data ( x ) [ log ⁡ D ( x ) ] E z ∼ p z ( z ) [ log ⁡ ( 1 − D ( G ( z ) ) ) ] − log ⁡ 4 2 J S D ( p data ∥ p g ) ≥ − log ⁡ 4 , where [ p d a t a p g ] \mi…

Vscode —— 解决Vscode终端无法使用npm的命令的问题

在cmd中可以正常执行npm -v等指令,但是在vs code终端中,无法执行npm -v,node -v等指令 出现报错 解决办法&#x1f447; 方法一&#xff1a;【右键单击Vscode】以【管理员身份运行】&#xff0c;【重启Vscode】 方法二&#xff1a;①【用户变量】的【path】添加npm所在路径的…

使用streampark进行flink on k8s LoadBalancer配置域名访问flink ui

在使用yarn部署flink任务时&#xff0c;yarn自动代理了flink web ui&#xff0c;通过yarn的地址即可访问任务web页面。 k8s模式下想访问flink web ui&#xff0c;要么使用NodePort的方式启动任务&#xff0c;然后通过k8s主机IPNodePort端口来进行访问。但是这种方法&#xff0…

LoongArch指令集-特权指令系统——摘抄自胡伟武体系结构和龙芯架构32位精简版参考手册

例外与中断 1 中断 1.1 中断类型 龙芯架构 32 位精简版下的中断采用线中断的形式。每个处理器核内部可记录 12 个线中断&#xff0c;分别是&#xff1a;1 个核间中断&#xff08;IPI&#xff09;&#xff0c;1 个定时器中断&#xff08;TI&#xff09;&#xff0c;8 个硬中断…

【Kubernetes】kubectl 常用命令

kubectl 常用命令 1.基础命令2.部署命令3.集群管理命令4.故障诊断与调试命令5.高级命令6.设置命令7.其他命令 kubectl 是 Kubernetes 提供的命令行管理工具。通过使用 kubectl&#xff0c;可以管理和操作 Kubernetes。 1.基础命令 命令 说明 create通过文件名或标准输入创建 …