零基础前端Vue的小白学习路——(Node.js,VSCODE,Hbuilder X)环境搭建

2023-11-09

        俗话说,实践是检验真理的唯一标准,IT的学习更是离不开实践。要想成绩好,一个"做题笔记本”少不了。搭建环境想必是许多IT人刚入门一个新语言的第一个门槛,不正确的配置、不适配的版本往往会让你未来的道路变得不平坦,因此搭建环境时需要尤为谨慎。好在有前辈悉心指引,让我的学习之路变得更平坦了些。

        知其然,知其所以然。首先肯定得知道他们是什么。

        Node.js——代码运行环境。Node.js是一个开源、跨平台的JavaScript运行时环境,其让JavaScript在服务端也可以进行开发。类似于Java对应的JVM(java运行时虚拟环境),其基于Chrome V8 JavaScript引擎构建。主要特点:事件驱动的、非阻塞式I/O的环境,适合在分布式设备上运行数据密集型的实时应用。

        VSCODE——轻量级的代码编辑器。适配包括Javascript在内的多种编程语言。

        Hbuilder X——代码编辑器,对于Vue的支持很好,适合使用Vue和做uni-app开发的人。

一、Node.js安装及配置

        下载链接:https://nodejs.org/zh-cn,推荐下载长期维护版。默认下一步安装即可。

        1、测试:cmd命令行:node -v                 npm -v

        出现版本则说明安装成功。如果没有,则还需配置环境变量。在环境变量对话框里,找到系统变量下的Path -->编辑 -->新建 -->将node.js的安装目录复制上去,点击确定即可。

        更改npm的本地仓库以及配置npm的下载镜像站(可以更快速的实现npm对扩展模块的下载)。操作见node.js安装以及HbuilderX配置

二、VSCode安装及配置

        下载链接:Download Visual Studio Code - Mac, Linux, Windows

 建议全部勾选。

1、测试:cmd命令行:code -v          出现版本则说明安装成功。

另外要想安装中文插件,可在扩展栏搜索Chinese进行下载。

2、Node.js调试配置:

        已经安装好Node.js后,可在VScode中选择Node.js作为代码的调试和运行环境。

 

 

 本人选择了自己创建的VS Code workspace 工作区 ===》选择Node.js====》自动生成launch.json文件。

运行自己写的js文件测试,“Hello World”成功!

 

 三、Hbuilder X的安装及配置

下载链接:HBuilderX-高效极客技巧

下载好zip版本,直接解压即可。入门使用文档:HBuilderX 文档

1、插件安装:根据自己需求安装,作者需要使用Node环境,Vue框架,因此安装了uni-app,javascript运行调试。(疑问,看以前的版本有Node插件,最新的版本里没找到,自己猜测应该是在Javascript运行调试插件里了?

 2、运行环境配置:在工具——>设置——>运行配置中配置运行终端类型,npm,node路径。

 3、Vue3测试:新建Vue3项目——>右键"外部命令"——>npm run build——>npm run dev——>npm run serve,可以得到生成的服务端网页链接,在浏览器中打开即可得到实例网页。

至此,环境搭建勉勉强强成功,后续便是语法理论知识和实操的学习了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

零基础前端Vue的小白学习路——(Node.js,VSCODE,Hbuilder X)环境搭建 的相关文章

  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 使用 dc.js 按条形值对条形图中的条形进行排序(排序)

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • python基础案例练习一

    员工管理系统练习 1 显示系统菜单 2 获得用户输入的菜单 3 根据用户的输入判断执行操作 存储员工信息 employee def show menu print 20 员工管理系统菜单 20 print 1 添加员工信息 print 2
  • 考试座位号 C语言

    每个 PAT 考生在参加考试时都会被分配两个座位号 一个是试机座位 一个是考试座位 正常情况下 考生在入场时先得到试机座位号码 入座进入试机状态后 系统会显示该考生的考试座位号码 考试时考生需要换到考试座位就座 但有些考生迟到了 试机已经结
  • 恶意数据包(pcap)下载网站合集

    收集一些恶意数据包下载网站 方便研究学习 https wiki wireshark org SampleCaptures https www netresec com page PcapFiles https www malware tra
  • xml中使用include引入布局

    为了复用布局 使用include方式引用 activity top bar xml 代码如下 需要注意的是 父容器LinearLayout中layout height为wrap content 而不是match parent 以免引入到其他
  • 如何动态创建二维数组[cpp]

    我们常见的用new来 动态创建一维数组 int m std cin gt gt m int 数组名 new int m 动态创建二维数组 方法一 int n 地图的长宽 cin gt gt n int map new int n 创建一个指
  • js 实现颜色值格式转换 rgb和十六进制的转换

    本文章是以prototype原型的方式 给string字符串类型添加方法 用于实现颜色值格式的转换 如果你不用原型方法 那么你只要借鉴实现方法就好了 RGB转换为16进制 String prototype colorHex function
  • Lightgbm多余信息显示

    LightGBM Warning No further splits with positive gain best gain inf 设置参数 verbosity 1 或 verbose 1
  • Python安装教程(2023年,3月)

    一 Python下载 1 进入Python官网 官网地址 https www python org 2 点击 Downloads 展开后点击 Windows 跳转到下载python版本页面 选择 Stable Releases 稳定版本 我
  • [gfirefly深入解析]--总体架构及demo讲解

    gfirefly是开源的分布式游戏服务器端框架 是firefly的gevent版本 想了解更多关于firefly可参考http www oschina net question 947559 147468 这是firefly的官网http
  • 【读书笔记】《Web全栈工程师的自我修养》

    读书笔记 Web全栈工程师的自我修养 推荐书单 1 什么是全栈工程师 黑客与画家 专业主义 2 如何成为全栈工程师 重来 更为简单有效的商业思维 精益创业 3 从学生到工程师 编程之美 微软技术面试心得 4 野生程序员的故事 打造Faceb
  • TOP命令及参数解析

    Top命令是linux 下常用的系统性能分析工具 能够实时显示系统中各个进程的资源占用状况 类似于windows的任务管理器 下面详细介绍它的使用方法 top 可以显示当前系统正在执行的进程的相关信息 包括进程ID 内存占用率 CPU占用率
  • 机器学习-分类-线性分类器

    在一个机器学习任务中 如果每一条数据的目标值是离散的 则该任务是一个分类任务 解决分类问题基本的方法有 线性分类器 决策树 朴素贝叶斯 人工神经网络 K近邻 KNN 支持向量机 SVM 组合基本分类器的集成学习算法 随机森林 Adaboos
  • java中float和double型数据在赋值时有哪些注意事项?,java语言中float和double类型的数据在编程时的注意事项...

    float和double类型的数据在编程时的需要注意的地方 package execisetest public class AccuranceTest public static void main String args float a
  • Rsync命令使用

    Rsync优点 持增量备份 第 次全量备份 第 次增量备份 边复制 边 较 边统计 传输效率很 数据集中备份 客户端可以推送数据 服务端 也可以从服务端获取数据 以客户端为参照物 保持 件属性 符号链接 硬链接 权限 时间等 安全 式传输
  • 微信企业号回调模式配置详细讲解

    对于微信企业号 我相信很多人都不陌生了 今天跟大家一起来探讨一下用java怎么去实现微信企业号回调模式配置 为什么需要开启回调模式 对于这点 我相信官方文档中说得比我更清楚 但是我还是想大家熟悉一下什么是回调模式 说白了就是当你有一个属于自
  • mysql in 查询时 入参为逗号隔开的字符如何查询,使用 find_in_set 代替 in

    SELECT FROM lao car model where find in set id 101 102 41840930066432 find in set 函数中 id 查询的字段名
  • 传统支付方式不能满足线下支付的需求

    刷脸支付趋势现在可以在便利店 餐饮店看见这样的场合 收银台不见了 换成了一块类似平板大小的显示屏 上边标注了刷脸支付 消费者在屏幕上点击开启刷脸支付 将脸部对准摄像头 摄像头采集到消费者面部信息后即可完成支付 消费金额就直接从消费者账户中扣
  • epoll实现原理

    用户态协议栈 为什么要实现epoll epoll并不是协议栈里面的 为什么要实现用户态协议栈 因为内核的epoll是对内核文件系统vfs fd进行的管理 是跟内核协议栈一起使用的 内核协议栈处理io后通过回调的方式来操作epoll中的就绪队
  • 两台计算机直连通信过程,教大家两台电脑网线直连传输的技巧

    我们总有需要把一台电脑的资料传输到另一台电脑的时候 其实我们可以让两台电脑共享局域网 通过网线直连来达到传输的目的 下面来看看小编是怎么操作的吧 1 设置电脑IP 首先打开下图界面 点击本地连接 2 接着我们点击属性选项 3 点击下图选中的
  • 零基础前端Vue的小白学习路——(Node.js,VSCODE,Hbuilder X)环境搭建

    俗话说 实践是检验真理的唯一标准 IT的学习更是离不开实践 要想成绩好 一个 做题笔记本 少不了 搭建环境想必是许多IT人刚入门一个新语言的第一个门槛 不正确的配置 不适配的版本往往会让你未来的道路变得不平坦 因此搭建环境时需要尤为谨慎 好