当前位置: 首页 > news >正文

uniapp cli开发和HBuilderX开发

uniapp cli开发和HBuilderX开发

前言

uniapp是一个跨平台的开发框架,可以开发出微信小程序、支付宝小程序、百度小程序、头条小程序、H5、App等,开发者只需要写一套代码,就可以发布到各个平台,大大提高了开发效率。

uniapp的开发方式有两种:

  • HBuilderX开发:可视化,应用工具
  • cli开发:命令行,开发工具

使用哪种方式开发,取决于你的习惯,我个人比较喜欢用cli开发,因为我觉得用命令行开发更加灵活,而且可以使用vscode等编辑器,而不是HBuilderX自带的编辑器。

1. cli开发和HBuilderX开发的区别

cli开发和HBuilderX开发的区别主要在于开发方式不同,HBuilderX开发是可视化的,而cli开发是命令行的。

他们之间可以相互转换,比如你可以用HBuilderX开发,然后用cli打包,也可以用cli开发,然后用HBuilderX打包。

操作步骤如下:

  • cli项目转HBuilderX项目:在HBuilderX中新建uniapp项目,然后把cli项目的src目录复制到HBuilderX项目中,然后在HBuilderX中运行即可。
  • HBuilderX项目转cli项目:通过cli命令创建一个新的项目,然后把HBuilderX项目复制到cli项目中的src目录中,然后在cli中运行即可。

因为HBuilderX开发是可视化的,所以这里主要介绍cli开发。

  • 安装HBuilderX:https://www.dcloud.io/hbuilderx.html

2. cli开发环境搭建

2.1 安装nodejs

uniapp cli是基于nodejs开发的,所以需要先安装nodejs。

安装方式有很多种,你可以浏览器搜索nodejs安装相关的教程内容。

以下是相对不太友好的安装方式:(主要用于增加博客的浏览量)

  • 安装nodejs:https://blog.csdn.net/qq_41974199/article/details/119328353
  • 安装完成后,打开命令行,输入node -v,如果能正常输出版本号,说明安装成功。

2.2 安装 vue-cli

vue-cli是vue的脚手架工具,可以快速创建vue项目。

npm install -g @vue/cli
  • 安装完成后,打开命令行,输入vue --version,如果能正常输出版本号,说明安装成功。

2.3 安装 uniapp cli

vue create -p dcloudio/uni-preset-vue my-project
npm install postcss@latest autoprefixer@latest --save-dev
npm install sass --save-dev

2.4 运行项目

npm run dev:h5

命令格式:npm run dev:%PLATFORM%

  • %PLATFORM%:平台,比如微信小程序就是dev:mp-weixin,H5就是dev:h5,具体可以查看package.json文件中的scripts字段。

在这里插入图片描述

3. 成功

访问:http://localhost:8080/

在这里插入图片描述

相关文章:

uniapp cli开发和HBuilderX开发

uniapp cli开发和HBuilderX开发 前言 uniapp是一个跨平台的开发框架,可以开发出微信小程序、支付宝小程序、百度小程序、头条小程序、H5、App等,开发者只需要写一套代码,就可以发布到各个平台,大大提高了开发效率。 uniapp的开…...

【Java异常】idea 报错:无效的目标发行版:17 的解决办法

【Java异常】idea 报错:无效的目标发行版:17 的解决办法 一,问题来源 springcloud的第一个demo项目就给我干趴了 二、原因分析 java: 无效的目标发行版: 17 原因就是 JDK 版本不对。从 IDEA 编辑器中可以找到问题的原因所在,…...

代码提交规范-ESLint+Prettier+husky+Commitlint

代码提交规范-ESLintPrettierhuskyCommitlint 配置eslint (3步)配置prettier(4步)1.安装配置prettier2.设置忽略文件 .prettierignore3.处理eslint冲突4. 配置vscode 的settings.json husky安装并配置lint-staged(3步)安装配置com…...

手动实现 Vue 3的简易双向数据绑定(模仿源码)

Vue 3 带来了许多令人兴奋的新特性和改进,其中之一就是其双向数据绑定的实现方式。与 Vue 2 使用 Object.defineProperty 不同,Vue 3 利用了 JavaScript 的 Proxy 特性来创建响应式数据。在这篇博客中,我们将探讨 Vue 3 中双向数据绑定的基础…...

LVS最终奥义之DR直接路由模式

1 LVS-DR(直接路由模式) 1.1 LVS-DR模式工作过程 1.客户端通过VIP将访问请求报文(源IP为客户端IP,目标IP为VIP)发送到调度器 2.调度器通过调度算法选择最适合的节点服务器并重新封装数据报文(将源mac地址改为调度器的mac地址&am…...

t-SNE高维数据可视化实例

t-SNE:高维数据分布可视化 实例1:自动生成一个S形状的三维曲线 实例1结果: 实例1完整代码: import matplotlib.pyplot as plt from sklearn import manifold, datasets """对S型曲线数据的降维和可视化"&q…...

配置应用到k8s

配置应用到k8s,前置条件是安装了Docker,Minikube,kubectl 应用已经通过Docker生成本地镜像文件 1,创建godemo-deployment.yaml apiVersion: apps/v1kind: Deploymentmetadata:name: godemo-deploymentspec:replicas: 3 #启动三个…...

(四)STM32 操作 GPIO 点亮 LED灯 / GPIO工作模式

目录 1. STM32 工程模板中的工程目录介绍 2. GPIO 简介 3. GPIO 框图剖析 1)保护二极管及上、下拉电阻 2) P-MOS 管和 N-MOS 管 3)输出数据寄存器 3.1)ODR 端口输出数据寄存器 3.2)BSRR 端口位设置/清除寄存器 4&a…...

你知道跨站脚本攻击吗?一篇带你了解什么叫做XSS

1.XSS简介 (1)XSS简介 XSS作为OWASP TOP 10之一。 XSS中文叫做跨站脚本攻击(Cross-site scripting),本名应该缩写为CSS,但是由于CSS(Cascading Style Sheets,层叠样式脚本&#x…...

JVM入门

JVM概述 JVM位置 JVM体系结构 注意:栈中一定不存在垃圾,栈中数据用完一个弹出一个,总结来说,栈区、本地方法栈、程序计数器这三块必定不存在垃圾。JVM调优主要是针对方法区、堆(99%)进行调优。 常用的第三…...

Cmake基础(5)

这篇文章主要描述如何使用cmake构建一个库工程 文章目录 add_libraryinstall 库工程的代码:头文件和源文件 #ifndef ADD_H #define ADD_H#ifdef _WIN32 #ifdef MYMATH_EXPORTS #define MYMATH_API __declspec(dllexport) #else #define MYMATH_API __declspec(dll…...

Rabbitmq 死信取消超时订单

本文使用的版本 otp_win64_25.0rabbitmq-server-3.11.26rabbitmq插件 rabbitmq_delayed_message_exchange-3.11.1 pom.xml文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> …...

C语言—每日选择题—Day55

指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 若有如下定义&#xff0c;则 p1&m&#xff1b;p2p1&#xff1b; 是正确赋值语句.说法是否正确&#xff1f; int *p1; int *p2; int m …...

软件测试岗位的简历怎么写?项目怎么包装

已经帮大家打包好了包装好的简历模板&#xff0c;大家可以直接进行套用&#xff0c;详情请望下看 自动化测试相关教程推荐&#xff1a; 2023最新自动化测试自学教程新手小白26天入门最详细教程,目前已有300多人通过学习这套教程入职大厂&#xff01;&#xff01;_哔哩哔哩_bili…...

服务器解析漏洞是什么?攻击检测及修复

服务器解析漏洞&#xff08;Server-side Include Vulnerability&#xff0c;SSI漏洞&#xff09;是一种安全漏洞&#xff0c;通常出现在支持服务器端包含&#xff08;SSI&#xff09;功能的Web服务器上。SSI是一种在Web页面中嵌入动态内容的技术&#xff0c;允许开发人员将外部…...

HTML---CSS美化网页元素

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.div 标签&#xff1a; <div>是HTML中的一个常用标签&#xff0c;用于定义HTML文档中的一个区块&#xff08;或一个容器&#xff09;。它可以包含其他HTML元素&#xff0c;如文本、图像…...

【Docker】基础篇

文章目录 Docker为什么出现容器和虚拟机关于虚拟机关于Docker二者区别&#xff1a; Docker的基本组成相关概念-镜像&#xff0c;容器&#xff0c;仓库安装Docker卸载docker阿里云镜像加速docker run的原理**为什么容器比虚拟机快**Docker的常用命令1.帮助命令2.镜像相关命令3.容…...

Potplayer播放器远程访问群晖WebDav本地资源【内网穿透】

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是&#xff1a;1 使用环境要求&#xff1a;2 配置webdav3 测试局域网使用potplayer访问webdav3 内网穿透&#xff0c;映射至公网4 使用固定地址在potplayer访问webdav 国内流媒体平台的内容…...

【神经网络】imshow展示图片报错

文章目录 代码示例报错信息报错原因解决方法其他问题 代码示例 plt.imshow(np.squeeze(images[0]))报错信息 Invalid shape (3, 60, 90) for image data报错原因 格式错误&#xff0c;输入具有RGB值的图像&#xff0c;输入三维数组参数的格式应该是&#xff08;高度&#xf…...

【C++】对象特性:无参有参构造函数,拷贝构造函数,析构函数

目录 对象的初始化和清理1.1 构造函数和析构函数1.2 构造函数的分类及调用1.3 拷贝构造函数调用时机1.4 构造函数调用规则1.5 深拷贝与浅拷贝 对象的初始化和清理 生活中我们买的电子产品都基本会有出厂设置&#xff0c;在某一天我们不用时候也会删除一些自己信息数据保证安全。…...

避免踩坑:Unity中Resources.LoadAll的正确使用姿势(含multiple模式Sprite处理)

Unity资源加载进阶&#xff1a;Resources.LoadAll与Sprite图集高效处理指南 在Unity开发中&#xff0c;资源加载是每个项目都无法绕开的核心环节。特别是当处理包含多张小图的Sprite图集时&#xff0c;很多开发者会陷入性能陷阱和功能误区。本文将深入剖析Resources.LoadAll的正…...

从零封装一个 Vue 低代码表单组件:我是如何借鉴 FcDesigner 的设计思路的

从零封装一个 Vue 低代码表单组件&#xff1a;我是如何借鉴 FcDesigner 的设计思路的 低代码开发正在改变前端工程师的工作方式。作为一名长期深耕表单领域的前端开发者&#xff0c;我曾参与过多个企业级低代码平台的搭建&#xff0c;也经历过从零开始封装表单组件的完整周期。…...

G-Helper:华硕笔记本电池健康管理的终极轻量化解决方案

G-Helper&#xff1a;华硕笔记本电池健康管理的终极轻量化解决方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地…...

超越单一工具:在快马平台探索多模型ai辅助开发的全新工作流

在开发过程中&#xff0c;AI辅助工具已经逐渐成为提升效率的利器。最近我在尝试使用InsCode(快马)平台时&#xff0c;发现它提供的多模型AI辅助开发能力&#xff0c;远比单一工具更加强大和灵活。下面分享一个我实践的综合示例项目&#xff0c;展示如何利用平台的多模型能力优化…...

uni-app小程序开发必备:纯TypeScript实现4种UUID生成方案(无npm依赖)

uni-app小程序开发实战&#xff1a;零依赖TypeScript实现4种UUID生成方案 在uni-app跨平台开发中&#xff0c;小程序环境对npm库的支持限制常常让开发者头疼。特别是在需要生成唯一标识符的场景下&#xff0c;传统依赖uuid库的方案往往无法直接使用。本文将带你从底层原理出发&…...

Vivado初始化设计慢?可能是这3个隐藏设置惹的祸

Vivado初始化设计慢&#xff1f;可能是这3个隐藏设置惹的祸 当你在深夜赶项目进度&#xff0c;Vivado却卡在"Initializing Design"界面转圈超过15分钟&#xff0c;那种焦虑感堪比考试时笔没水。作为Xilinx FPGA开发的核心工具&#xff0c;Vivado的初始化速度直接影响…...

计算机毕设 java 基于 BS 的驾校在线学习考试系统 SpringBoot 驾校在线学习与考试管理平台 JavaWeb 驾校理论学习与模拟考试系统

计算机毕设 java 基于 BS 的驾校在线学习考试系统 43i2x9&#xff0c;末尾的数字和英文也要加上 &#xff08;配套有源码 程序 mysql 数据库 论文&#xff09;本套源码可以先看具体功能演示视频领取&#xff0c;文末有联 xi 可分享随着驾考需求的不断增长&#xff0c;传统驾校理…...

Deepfake Offensive Toolkit Docker部署:跨平台解决方案详解

Deepfake Offensive Toolkit Docker部署&#xff1a;跨平台解决方案详解 【免费下载链接】dot The Deepfake Offensive Toolkit 项目地址: https://gitcode.com/gh_mirrors/dot/dot Deepfake Offensive Toolkit&#xff08;简称dot&#xff09;是一款功能强大的深度学习…...

从零到一:STM32手动移植FreeRTOS的工程化实践与源码解析

1. 为什么需要手动移植FreeRTOS&#xff1f; 第一次接触FreeRTOS时&#xff0c;很多人会选择用STM32CubeMX自动生成工程。这确实方便&#xff0c;就像用预制菜做饭&#xff0c;但真正想掌握RTOS内核&#xff0c;手动移植才是"从买菜到炒菜"的完整过程。我遇到过不少项…...

PyTorch张量拼接实战:torch.stack()与torch.cat()的5个典型场景对比

PyTorch张量拼接实战&#xff1a;torch.stack()与torch.cat()的5个典型场景对比 在深度学习项目中&#xff0c;数据维度的操作就像乐高积木的拼装——选错连接方式可能导致模型结构崩塌。作为PyTorch中高频使用的两种拼接操作&#xff0c;torch.stack()和torch.cat()常被混淆使…...