vue3基础教程(1)——nodejs环境搭建

博主个人小程序已经上线:【中二少年工具箱】

小程序二维如下:
在这里插入图片描述


正文开始

  • 专栏简介
  • 1. 环境菜单
  • 2.为什么下载node
  • 3. nodejs简介
  • 4. nodejs安装
  • 5. 编辑器选择


专栏简介

本系列文章由浅入深,从基础知识到实战开发,非常适合入门同学。

零基础读者也能成功由本系列文章入门,但如果您具备以下基础,将会事半功倍:

  1. HTML基础
  2. css基础
  3. js基础

当然,即使从未接触过前端代码的小白,也能轻松学习本系列课程,因为我会在文章中简略穿插前端基础知识。

由于各平台对专栏文章的支持度不同,所以如果您看到这篇文章的平台,系统学习专栏文章的操作不够丝滑,可以先关注小程序,后续小程序会开发专栏博客功能。如果上面二维码被禁,可以通过二维码知乎地址、二维码csdn地址等入口进入,扫码关注。


1. 环境菜单

  1. nodejs下载安装
  2. 编译器(webstorm)选择

2.为什么下载node

有前端HTML+css+js开发经验的同学,应该会有疑问,我以前开发前端页面不用下载任何环境,写出代码,拖到浏览器里,就能正常显示。

为什么学习vue要下载node这么麻烦呢?

这是因为vue有自己的一套语法,但是万变不离其宗,最终显示到页面上的,其实还是html+css+js。那么vue语法是如何变成html三件套的呢?答案就是node。node是一个环境,也可以理解为是一个软件,或者容器,它主要的作用就是把vue的语法编译成html语法。

如果难以理解,我们可以不用深究。只需要知道,vue想要正常运行,需要一个环境,那就是nodejs。

既然这么麻烦,为什么还有那么多人使用vue,而不是直接写html?那肯定是因为当我们入门后,基于vue完成项目,更简单、更强大……

总之,不要有畏难情绪。任何框架的产生与流行,一定是因为他能解决某些问题,降低编码的工作量、难度等等。

3. nodejs简介

如果只关注学习vue3的同学,可以不需要过多了解node版本管理工具。从nodejs中文网下载稳定版的nodejs,然后按照步骤一步步安装即可。

nodejs中文网下载地址:https://www.nodejs.com.cn/

在这里插入图片描述
新手不要多想,选择这个最稳定版本即可。

有一定基础的同学,可以下载nvm,或者博主自主开发的node版本管理工具,只适配windows系统。登录上面小程序首页后,可以获取工具最新版本下载链接:
在这里插入图片描述

4. nodejs安装

这是nodejs 18.19.0版的链接地址:https://npmmirror.com/mirrors/node/v18.19.0/node-v18.19.0-x64.msi
下载后,按照步骤依次安装即可。

  1. 双击软件,进入安装界面
    在这里插入图片描述
  2. 接受协议
    在这里插入图片描述
  3. 选择下载地址,最好默认
    在这里插入图片描述
  4. 下一步即可。这里会自动把nodejs添加到环境变量,所以推荐新手用这个安装包的形式,能简化很多工作。

在这里插入图片描述

  1. 继续下一步

在这里插入图片描述

  1. 最后一步,点击install安装即可。

在这里插入图片描述

5. 编辑器选择

前端编辑器(IDE)使用最广泛的有三个:

  1. vscode
  2. webstorm
  3. hbuilderx

vscode,免费的代码编辑器,背靠微软,信誉有保障,最近两年比较火。我没有使用这个软件,是因为最初接触的是webstorm,用习惯了,转vscode不太舒服。

webstorm,付费的代码编辑器,但是网上破解方案满天飞,很容易按照方案破解。作为老牌前端编辑器,功能强大,使用丝滑。如果有破解经验,可以使用这个,后期可能会把破解功能写到自己的工具里去。

hbuilderx,国产唯一能打的前端编辑器,但是和前面两个比,还是有缺陷,但是uniapp官方指定编辑器,基于uniapp开发小程序,目前只能使用hbuilderx。如果目前只是入门vue3,建议从前面两个里面选一个。

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

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

相关文章

七通道NPN 达林顿管GC2003,专为符合标准 TTL 而制造,最高工作电压 50V,耐压 80V

GC2003 内部集成了 7 个 NPN 达林顿晶体管,连接的阵列,非常适合逻辑接口电平数字电路(例 如 TTL,CMOS 或PMOS 上/NMOS)和较高的电流/电压,如电灯电磁阀,继电器,打印机或其他类似的负…

完美解决Iframe嵌入帆软报表出现跨域cookie写不进去的问题

随着google chrome对第三方cookie的限制越来越狠,现在发现之前使用iframe嵌入的帆软报表已经不好使了。官方现在解决iframe嵌入帆软报表出现跨域导致cookie写不进去的方案是主推 统一主域名的方案(谷歌浏览器单点登录失败- FineReport帮助文档 - 全面的报表使用教程和学习资料…

Apache Calcite 一条 SQL 的查询计划生成之旅【下】

作者:沈磊(LakeShen),公众号:雷克分析 上一篇文章我们讲解了 Apache Calcite 架构设计及 SQL 优化器概述,这篇文章我们将接着介绍 Apache Calcite 组件的关键原理。 三、Calcite SQL 解析和元数据验证关键…

LLM+RAG: 关于知识问答优化的思考总结

本文分享实践中对LLMRAG实现知识问答系统的相关调研和思考。 LLM的知识库问答有3种实现路径:RAG 或 微调,或两者结合。而RAG和微调都各有利弊,比如说: - RAG: 低成本易部署,适用于知识会更新的场景&#…

C语言----动态内存管理(2)

1.这里总结动态内存管理里面的错误 (1)使用malloc开辟空间以后直接赋值 这个就是malloc开辟失败返回空指针,直接给空指针赋值就是错误的, tip1:使用malloc开辟空间以后一定要判断是否为空 (2) 越界访问…

Qt应用软件【测试篇】cppchecker静态代码检查

文章目录 cppcheker简介下载地址与安装检查项目QT Creator使用CPP Cheker开启检查常见错误总结错误信息说明cppcheker简介 Cppcheck 是一个用于 C/C++ 代码的分析工具。它提供独特的代码分析以检测错误,并专注于检测未定义的行为和危险的编码结构。其目标是仅检测代码中的真实…

itertools, 一个超好用的Python库

前言 Python用来处理迭代器的工具你想到了啥?itertools 就是一个特别有用的库,它提供了一系列用于创建和操作迭代器的工具,以下是10个常用的操作,可用在实际工作中,熟练掌握这些操作,将极大提升你在 Pytho…

带你快速初步了解Python列表

1.列表 列表主要是用来存储多个数据,是有序的集合 2.创建列表 """ 语法:变量名 [数据1,数据2,数据3......] 注意:列表中的数据类型可以是各种不同的数据类型 """ 创建空列表 list1 [] print(list1) …

【Ai生态开发】Spring AI上架,打造专属业务大模型,AI开发再也不是难事!

大家好 这里是苏泽 后端是工作 ai是兴趣 对于ai的产生我的立场是拥抱ai的 是希望拿他作为提升能力的工具 那么这一篇带大家来学习如何使用ai打造一个专属的业务大模型 需求 就是说假设现在有一个 商城系统 里面有查询订单的api和获取商品购买方式的api 用户只需要输入 “…

【Windows】打开ftp服务器上的文件夹时发生错误,请检查是否有权限

【Windows】打开ftp服务器上的文件夹时发生错误,请检查是否有权限 ftp协议有两种工作方式:port方式和pasv方式,中文意思为主动式和被动式。 port(主动)方式的连接过程是:客户端向服务器的ftp端口&#xf…

Unity 游戏设计模式:工厂模式

本文由 简悦 SimpRead 转码, 原文地址 mp.weixin.qq.com 工厂模式是一种创建型设计模式,它提供了一种封装对象实例化过程的方式,使得客户端代码与具体类的实现解耦。 在 C# 的游戏设计中,模式有以下作用: 对象的创建…

3.1作业

作业要求&#xff1a; 通过w(红色臂角度增大)s&#xff08;红色臂角度减小&#xff09;d&#xff08;蓝色臂角度增大&#xff09;a&#xff08;蓝色臂角度减小&#xff09;按键控制机械臂 程序代码&#xff1a; #include<myhead.h> #define SER_IP "192.168.126.…