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

1 开通高德地图API服务

1、进入高德地图API官网(https://lbs.amap.com/):
在这里插入图片描述
2、注册登录。
3、进入控制台。

在这里插入图片描述

4、点击“应用管理”,点击“我的应用”,创建新应用。

在这里插入图片描述

5、添加Key,服务平台选择“Web端(JS API)”,白名单不要填写,勾选阅读并同意。

在这里插入图片描述

点击提交后,就能看到Key已经生成,记住这里的Key和安全密钥。

在这里插入图片描述

2 安装Node.js

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

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

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

3 创建Vue.js项目

官网链接:

https://cn.vuejs.org

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

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

在这里插入图片描述

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

npm create vue@latest
y
vuejs_test001
test_package
回车(都是否)
cd vuejs_test001
npm install

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

npm run dev

在这里插入图片描述
输入h可以查看帮助。

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

http://localhost:5173/

在这里插入图片描述

4 Visual Studio Code内测试

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

npm run dev

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

在这里插入图片描述

5 安装Visual Studio

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MMDetection中的数据处理

CustomDataset 代码路径:mmdet/datasets/custom.py mmdet中的CustomDataset继承自torch的Dataset,因此,对应的需要实现3个虚函数,接下来我们首先看看这3个重要函数的实现。 构造函数 CLASSES None # static变量def __init__…

关于勒索软件盛行,LockBit网络攻击者气焰嚣张的动态情报

一、基本内容 在过去一周内,LockBit团队颇为高调,他们对关键组织、政府和企业发动了一系列的攻击。该勒索软件团队发动的攻击数量远远超过其他所有的勒索团队,CSEM事件为近期勒索事件画上了句号 二、相关发声情况 2023年8月30日&#xff0…

数据库原理知识点清晰总结

数据库基础知识 数据库系统结构 数据库管理系统 数据库设计 关系数据库 关系数据库标准语言SQL 关系数据库规范化理论 数据库保护技术 视图 存储过程 触发器 数据的锁定

[uniapp] 文件查找失败:‘./iconfont.woff?t=1703574566334‘

uniapp 报错 文件查找失败:‘./iconfont.woff?t1703574566334’ uniapp引入图标的时候如果没有处理,就会报这个错误,这个错误是因为字体图标用的相对路径,uniapp不允许, 所以要解决这个错误,只需要我们去到iconfont.css文件内将相对路径改为绝对路径就好 改成 …

【模型部署入门 一】:Pytorch图像分类模型转换ImageNet1000类预训练模型转ONNX

入门学习主要是跟随同济子豪兄,很感谢该博主,本博客代码主体是子豪兄的,我只是总结加工整理记录。 子豪兄对应学习视频链接地址为:ImageNet1000类预训练模型转ONNX 我自己总结的教程中代码使用任何python编译环境都可以直接打开…

Linux系统--账号和权限管理

目录 一、Linux安全模型 二、用户账号和组账号 2.1 用户帐号类型 2.2 组账号 2.3 用户和组的关系 三、两个重要文件夹 3.1 用户账号文件/etc/passwd 3.2 /etc/shadow 四、用户命令 4.1 useradd命令——添加用户 4.2 passwd命令——密码管理 4.3 usermod命令—…

北科智慧智能手提箱旗舰版惊艳亮相2023(香港)智能科技展

2023年12月8日,北科智慧团队在粤港澳大湾区创新发展峰会暨侨交会2023(香港)智能科技展上举办新品发布,推出三款自主研发科技产品:智能手提箱高级版和旗舰版,以及智能呈批夹。新品一经推出,便受到…

PMP®项目管理,2024年1月4日开课啦~想了解的提前查看!

PMP项目管理认证 1🈷4日开课~ 想报名的提前预约啦 👇👇👇 👆(以上是PMP课程内容) 课程介绍 PMP(Project Management Professional)是由美国项目管理协会(…

Kubernetes的理论基础

k8s:kubernetes:8个字母省略,就是k8s。 自动部署,自动扩展和管理容器化部署的应用程序的一个开源系统。k8s是负责自动化运维管理多个容器化程序的集群,是一个功能强大的容器编排工具。分布式和集群化的方式进行容器管理。 1.15 1.18 1.20 1…

vue 基础学习 一

1. vue 使用快速入门三步走 (1) 新建 HTML 页面&#xff0c;引入 Vue.js文件 1 2 3 4 5 6 7 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Vue.js 入门示例</title> <script src"https://cdn.j…

Python如何实现邮件的发送

python笔记- 发送邮件 依赖&#xff1a; Python代码实现发送邮件&#xff0c;使用的模块是smtplib、MIMEText&#xff0c;实现代码之前需要导入包&#xff1a; import smtplib from email.mime.text import MIMEText 使用163邮件发送邮件&#xff0c;具体代码实现如下&#x…

计算机毕业设计选题推荐,ssm诗词打卡微信小程序 44669(赠送源码数据库 )上万套实战教程手把手教学JAVA、PHP,node.js,C++、python、数据可视化等

诗词打卡微信小程序 摘要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;诗词打卡微信小程序被用户普遍使用&…

Cron介绍,以及常见的cron表达式

目录 一.cron介绍 1.什么是Cron&#xff1f; 2.Cron语法 时间字段的取值范围如下&#xff1a; 时间字段支持以下特殊字符&#xff1a; 下面是一些示例&#xff1a; 3.虚拟机安装cron(centos7展示) 二.常见的cron表达式 一.cron介绍 1.什么是Cron&#xff1f; Cron是一个…

视频物体对象追踪AI技术模型——Tracking Any Object Amodally

项目地址&#xff1a;https://tao-amodal.github.io 论文&#xff1a;https://arxiv.org/abs/2312.12433 GitHub&#xff1a;GitHub - WesleyHsieh0806/TAO-Amodal: Official Code for Tracking Any Object Amodally AIGC专区&#xff1a;aigc 更多消息&#xff1a;AI人工智能行…

Linux之vim编辑器

目录 vim编辑器 vim编辑器指令 命令模式指令 光标相关 移动光标相关 文本操作 底行模式指令 插入模式 vim配置 vimforcpp 面试官&#xff1a;小伙子&#xff0c;你是用什么环境编写代码的&#xff1f; 小明&#xff1a;vs2019 面试官&#xff1a;小伙子&#xff0c…

亚马逊云科技 re:Invent 2023 产品体验:亚马逊云科技产品应用实践 王炸产品 Amazon Q,你的 AI 助手

意料之中 2023年9月25日&#xff0c;亚马逊宣布与 Anthropic 正式展开战略合作&#xff0c;结合双方在更安全的生成式 AI 领域的先进技术和专业知识&#xff0c;加速 Anthropic 未来基础模型的开发&#xff0c;并将其广泛提供给亚马逊云科技的客户使用。 亚马逊云科技开发者社…

工业信息采集平台的五大核心优势

关键字&#xff1a;工业信息采集平台,蓝鹏数据采集系统,蓝鹏测控系统, 生产管控系统, 生产数据处理平台,MES系统数据采集, 蓝鹏数据采集平台通过实现和构成其他工业数据信息平台的一级设备进行通讯&#xff0c;从而完成平台之间的无缝对接。这里我们采用的最多的方式是和PLC进行…

vue3 vue-cropper实现图片裁剪+上传功能(组件封装使用)

效果&#xff08;CV即用&#xff09; 1.安装引入vue-cropper&#xff08;官网&#xff09;官网地址 npm install vue-croppernextimport vue-cropper/dist/index.cssimport { VueCropper } from "vue-cropper";2. 全局引入 import VueCropper from vue-cropper; i…

链接世界与中国时尚文化,积萨伯爵国际时尚品牌在中国大放异彩

时尚的历史是一部文化发展的历史。从中国古代到现代西方&#xff0c;每个时代的时尚都有其独特的文化背景和历史意义。自丝绸之路开启了古代中国与罗马帝国之间的贸易&#xff0c;时尚的不断创新和变革&#xff0c;是文化变迁和时代精神的反映。时尚的变化&#xff0c;也引领着…