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.hqwc.cn/news/309590.html

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

相关文章

HCIA-Datacom题库(自己整理分类的)——ARP协议【完】

一、单选 1.ARP 属于哪一层协议? 数据链路层 网络层 物理层 传输层 2.ARP请求是____发送的 点播 广播 组播 单播 关于ARP报文的说法错误的是? ARP请求报文是广播发送的 ARP报文不能被转发到其他广播域 ARP应答报文是单播方发送的 任何链路层协议都需…

攻防世界easyphp解题

攻防世界easyphp解题 <?php highlight_file(__FILE__); $key1 0; $key2 0;$a $_GET[a]; $b $_GET[b];if(isset($a) && intval($a) > 6000000 && strlen($a) < 3){if(isset($b) && 8b184b substr(md5($b),-6,6)){$key1 1;}else{die(&q…

一语道破爬虫,来揭开爬虫面纱

目录 一、爬虫&#xff08;网络蜘蛛(Spider)&#xff09; 1.1、是什么&#xff1a; 1.2、学习的原因 1.3、用在地方&#xff1a; 1.4、是否合法&#xff1a; 1.5、后果 案例&#xff1a; 二、应用领域 三、Robots协议 四、抓包 4.1、浏览器抓包 4.2、抓包工具 常见…

十三:爬虫-Scrapy框架(下)

一&#xff1a;各文件的使用回顾 1.items的使用 items 文件主要用于定义储存爬取到的数据的数据结构&#xff0c;方便在爬虫和 Item Pipeline 之间传递数据。 items.pyimport scrapyclass TencentItem(scrapy.Item):# define the fields for your item here like:title scr…

HarmonyOS4.0系统性深入开发09卡片使用动效能力

卡片使用动效能力 ArkTS卡片开放了使用动画效果的能力&#xff0c;支持显式动画、属性动画、组件内转场能力。需要注意的是&#xff0c;ArkTS卡片使用动画效果时具有以下限制&#xff1a; 名称参数说明限制描述duration动画播放时长限制最长的动效播放时长为1秒&#xff0c;当…

Games101作业5

1.实现Renderer.cpp 中的 Render()&#xff1a;为每个像素生成光线 这里你需要为每个像素生成一条对应的光 线&#xff0c;然后调用函数 castRay() 来得到颜色&#xff0c;最后将颜色存储在帧缓冲区的相 应像素中。 我们要做的就是将屏幕空间下的坐标最后转换到世界空间的坐标…

Innosetup 调用c# dll 和 c# dll的函数导出

目标需求&#xff0c;基于现在安装包脚本。需要在用户安装和卸载成功时。进行数据记录,所以需要调用c#dll 主要涉及到的知识点 需要理解脚本的文件使用机制脚本的文件dll加载&#xff0c;和dll的调用c# dll的制作&#xff0c;和工具的使用 下面具体介绍 脚本的文件dll加载&…

鸿蒙应用开发 Web 组件抽奖

1 概述 相信大家都遇到过这样的场景&#xff0c;有时候我们点击应用的页面&#xff0c;会跳转到一个类似浏览器加载的页面&#xff0c;加载完成后&#xff0c;才显示这个页面的具体内容&#xff0c;这个加载和显示网页的过程通常都是浏览器的任务。 ArkUI 为我们提供了 Web 组…

小米汽车 SU7 技术发布会-智能驾驶猜想,真的“吊打”特斯拉?

核心主题 本人AI数据工程师&#xff0c;看完小米汽车 SU7 技术发布会&#xff0c;主谈智能驾驶猜想。 小米汽车披露&#xff1a;智能驾驶要2024年跻身第一梯队 发布会前沿致敬经典&#xff0c;挺好的毕竟礼多人不怪。 见面道辛苦&#xff0c;必定是江湖。 见面致经典&#…

hyperf console 执行

一、原理描述 hyperf中&#xff0c;不难发现比如自定义控制器中获取参数&#xff0c;hyperf.php中容器获取&#xff0c;传入的都是接口&#xff0c;而不是实体类。 这是因为框架中的配置文件有设置对应抽象类的子类&#xff0c;框架加载的时候将其作为数组&#xff0c;使用的…

《Linux系统与网络管理》复习题库---简答题

1、简述这些分区的名字以及各自的作用。 答&#xff1a; /boot 存放内核镜像的地方&#xff0c;这个文件夹独立分区的意义在于降低不能开机的风险。 /根目录&#xff0c;一般采用 etx3 文件系统&#xff0c;分区的容量一定要大于安装软件包的容量。 /usr 多数软件的默认安装的地…

ssm基于vue框架的点餐系统的设计与实现+vue论文

基于vue框架的点餐系统的设计与实现 摘要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。传统的点餐信息管理模式&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以人力为主的…