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

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

小程序二维如下:


@TOC


专栏简介

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

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

  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完成项目,更简单、更强大......

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

2. nodejs简介

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

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

新手不要多想,选择这个最稳定版本即可。

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

nodejs安装

这是nodejs 18.19.0版的链接地址npmmirror.com/mirrors/nod... 下载后,按照步骤依次安装即可。

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

编辑器选择

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

  1. vscode
  2. webstorm
  3. hbuilderx

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

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

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

相关推荐
王王碎冰冰3 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼4 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安5 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队5 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好5 小时前
pinia从定义到运用
前端·vue.js
代码小学僧5 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
汤姆Tom6 小时前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
东坡白菜6 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥9 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT11 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js