程序员经验分享-hwhale

Vue初始化在HBuilderx中快速搭建

2023-11-06

HBuilderx快速新建VUE项目

一、安装HBuilderx开发工具

官网：HBuilderx

hbgwlo

HBuilderXH是HTML的第一个字母，Builder是builder，X是HBuilder的下一个版本。我们也被称为HX。

HBuilderX是轻量级但功能强大的 IDE。

它的官网上介绍到HBuilderx为极客、为懒人、为我们前端开发人员提供了代码提示性非常强的一款编辑器

安装步骤：

1.点击下载安装开发工具HBuilderx，这里选择自己电脑系统的压缩包就行

hberx01

2.完成后，直接解压到自己的文件夹下，我这里就放在D盘

hb02

3.安装完成后，打开把它的插件下载安装OK>>【工具】>>【插件安装】>>【安装新插件】

hberx03

4.建议：里面的插件都安装上，或者根据自己的需求来安装，安装完成后需要重启一下应用

hberx04(1652155599)

二、安装node.js

Nodejs是个在服务器动可以解析和执行JavaScript代码的运行环境，也可以说是一个运行时平台，仍然使用JavaScript作为开发语言，但是提偶了一些功能性的API，例如文件操作和网络通信API等。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

Node.js中文网：Node.js

安装流程：

1.下载Windows版的，目前安装的版本是16.15.0，大家安装的时候安装最新稳定版

nodehh5(1652155529)

2.点击安装，直接点下一步Next

node02

2.点击安装，直接点下一步√选，下一步

node03

3.选择安装路径 ，也可以默认

node04

4.点击下一步Next，默认安装这几个

node06

5.下一步

node07

6.点击install安装

node08

7.安装完成

node10

8.测试安装是否成功

电脑上的【win+R】键输入cmd，输入命令node -v，如果出现v.数字和小数点 说明安装成功，

npm 是自带的我的版本号是8.5.5

ces001

9.Node.js环境变量的配置

在我们的目录结构中新建node_cache和node_global文件夹

image-20220508203256377

新建完成后，打开【命令面板】cmd进去，输入

npm config set prefix "D:\nodejs\node_global"

npm config set cache"D:\nodejs\node_cache"

注：每输入一个回车一下

  1. 打开【控制面板】>>【控制和安全】>>【系统】>>【高级系统设置】

    image-20220508202737009

  2. 查看系统变量，找到path编辑里面

    image-20220508204924292

  3. 在系统变量path新建

    image-20220509152751033

  4. 点击确认就可以了

三、新建初始化项目

HBuilderx 为我们开发人员提供了三种初始化的方式：

1.直接通过<script>标签引入

2.新建2.0版本的cli

3.新建3.0版本的cli

1.新建一个空文件包，直接在编辑器打开，右键【新建】>>【项目】

image-20220509221158486

2.选择【vue普通模式】

image-20220509220927548

3.新建成功的目录结构

image-20220509221444671

新建vue-cli2.0

上面同样的方式

image-20220509221658300

目录结构，然后点击运行到浏览器或者终端运行，这边3.0的就不在演示，和上面的一样的流程

image-20220509222021499
整理不易，点赞支持，关注，收藏
需要原文档微信搜索公众号【JieRanx】
回复【vue入门】下载
在这里插入图片描述

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

vue

vuejs

前端

javascript

Vue初始化在HBuilderx中快速搭建 的相关文章

  • 可能未处理的承诺拒绝（id 0）类型错误 GET 或 HEAD 请求不允许主体

    import React from react import FlatList ActivityIndicator Text View from react native export default class FetchExample

  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有

  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu

  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro

  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与

  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包

  • 如何使用javascript确保元素仅在圆上朝一个方向移动？

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394

  • JavaScript 验证和 PHP 验证？

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单

  • 为什么 setTimeout 在 Chrome 中触发两次，而在 IE 或 Firefox 中则不然？

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13

  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test

  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com

  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec

  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作？

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht

  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J

  • 有没有办法使用 ko.observableArray 作为地图？

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray

  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • ios－消息中心 NSNotificationCenter 的介绍

    1 通知中心概述 通知中心实际上是在程序内部提供了消息广播的一种机制 通知中心不能在进程间进行通信 实际上就是一个二传手 把接收到的消息 根据内部的一个消息转发表 来将消息转发给需要的对象 通知中心是基于观察者模式的 它允许注册 删除观察者

  • C++17入门经典

    C 17入门经典 注意 第1章 基本概念 第2章 基本数据类型 第3章 处理基本数据类型 第4章 决策 第5章 数组和循环 第6章 指针和引用 第7章 操作字符串 第8章 定义函数 第9章 函数模板 第10章 程序文件和预处理指令 第11章

  • python 修饰器 参数_Python修饰器讲解

    转自 http www cnblogs com rollenholt archive 2012 05 02 2479833 html 文章先由stackoverflow上面的一个问题引起吧 如果使用如下的代码 makebold makeit

  • 语义分割--PANet和Understanding Convolution for Semantic Segmentation

    语义分割 PAN Pyramid Attention Network for Semantic Segmentation FCN作为backbone的结构对小型目标预测不佳 论文认为这存在两个挑战 物体因为多尺度的原因 造成难以分类 针对这

  • J2EE规范技术

    原文 http blog csdn net erikxu archive 2004 12 07 208170 aspx J2EE的13种核心技术 1 JDBC Java Data Base Connectivity java数据库连接 是一

  • Unity3D 中使用OnTiggerEnter遇到的不触发问题

    移动GameObject 绑定BoxCollider Istrigger选中 固定GameObject 绑定BoxCollider 刚体属性 IsKinematic选中 此种情况下 移动GameObject中的OnTriggerEnter

  • 数据结构（1）前言

    1 学习数据结构前 需要掌握结构体和指针的使用 需要了解typedef这个关键字 对这部分知识欠缺的可以查看 C语言结构体详解 何为指针 与数组名有什么区别 2 作为一名想成为嵌入式软件工程师的人而言 很多像电气工程 电子信息等专业的人在大

  • Windows11 文件选择打开方式时卡死 解决

    发生的现象 在 打开方式 窗口的地址栏粘贴应用的地址 gt 打开方式界面卡死 完整步骤 左键点击打开epub文件 gt 跳出 寻找一个应用以打开此 epub文件 gt 选择 在电脑上选择应用 gt 弹出 打开方式 窗口 gt 在 打开方式

  • ❤ 15个基于Vue3.0全家桶的优秀开源项目

    15个基于Vue3 0全家桶的优秀开源项目 Vue Admin Better github https github com chuzhixin vue admin better vue admin better 对比其他来源 admin

  • 雨停了，我将雨伞收起

    天空中已有阳光从厚重的云层间隙射向大地 我将手中的雨伞收起 伞面上留存着的雨滴正沿着伞面的褶皱流下打在地上 我望向远方 一辆汽车沿着自己的轨迹行驶 路边小坑中的积水在车轮的驱赶下纷纷跳上灌木丛的绿叶寻找庇护 一阵清脆的自行车铃在身后响起 一

  • Android BaseQuickAdapter万能适配器

    RecycleView万能适配器 一导入 implementation com github CymChad BaseRecyclerViewAdapterHelper 2 9 24 implementation com android s

  • spring-kafka并行度concurrency在应用集群部署(多个节点)正确设置，附上Kafka Manager监控效果

    我们都知道kafka有topic的概念 为了能够更好的支持水平扩容 topic又分了很多的Partition 消费者负责消费Partition中的消息 一个Partition只能被一个消费者消费 但是一个消费者可以消费多个partition

  • zotero与Obsidian联动笔记（二）：zotero拖拽highlights的格式修改

    文章目录 zotero拖拽highlights的格式修改 zotero拖拽highlights的格式修改 方法 两种格式的文本 p highlight quotes true citation comment p blockquote hi

  • unity 3D RPG教程（一）

    目录 声明 1 Create Project 2 Build Level 3 PolyBrush 发挥创意构建场景 4 Navigation 智能导航地图烘焙 5 MouseManager 鼠标控制人物移动 声明 本教程学习均来自U3D中文

  • mysql中ddl语句有哪些_什么是 DDL 语言？其中包括哪些语句？

    展开全部 DDL一般指数据定义语32313133353236313431303231363533e4b893e5b19e31333431373937言 数据库模式定义语言DDL Data Definition Language 是用于描述数

  • 华为OD机试 - 跳格子游戏（Java)

    题目描述 地上共有N个格子 你需要跳完地上所有的格子 但是格子间是有强依赖关系的 跳完前一个格子后 后续的格子才会被开启 格子间的依赖关系由多组steps数组给出 steps 0 表示前一个格子 steps 1 表示steps 0 可以开启

  • C++(14)：函数返回类型auto推导

    C 11可以通过结合auto和decltype来动态的声明函数的返回值类型 include

  • plt.style.use设置背景样式

    利用matplotlib绘图设置背景 使用到plt style use 时 对这个参数做一下小结 matplotlib 使用某种样式 plt style use 参数可以是一个 URL 或者路径 指向自己定义的 mplstyle 文件 可以

  • 翁凯c语言作业8-3

    include

  • Vue初始化在HBuilderx中快速搭建

    HBuilderx快速新建VUE项目 一 安装HBuilderx开发工具 官网 HBuilderx HBuilderXH是HTML的第一个字母 Builder是builder X是HBuilder的下一个版本 我们也被称为HX HBuild

热门标签