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

uniapp小程序开发入门01-快速搭建一个空白的项目并预览它

uniapp小程序开发入门01-快速搭建一个空白的项目并预览它!由于近期有市场需求和计划,构建一套自己的小程序,所以再次带领大家系统的过一遍,如何使用uniapp程序快速构建一套完整的项目。今天是第一小节,带领大家快速构建一个入门的空白项目,并且启动预览它。


1:第一步是开发环境和工具的推荐。

在这里,强烈推荐大家使用HBuildX这个软件来开发uniapp。没有为什么,因为它提供了很多好用的插件管理功能和模块。方便我们后期进行项目功能的深入拓展。

大家没有安装过的可以点击下面的入口地址去下载,安装一下这个开发软件。

官方下载入口地址:

https://www.dcloud.io/hbuilderx.html

声明:这个是无需安装!无需安装!下载后,直接解压!执行里面的exe可执行文件即可启动它了。很简单。省心! 


2:开发环境安装完成后, 推荐大家像我一下,在硬盘根目录下面新建一个文件夹,给它起个名字。方便我们以后统一管理uniapp开发设计的所有项目代码!方便我们及时找到项目代码。我的文件夹名字就叫做:uniappproject。大家可以自定义一个自己能熟练记忆的名字即可。可以看到我的下面已经存放了很多项目了。


3:第三步,启动HBuildX,之后, 如图,点击,文件-》新建-》项目

如图,我们直接选择uniapp即可,官方是提供了一些别人写好的项目,我们可以拿来参考。今天我们是带领大家快速搭建一个空白的项目。所以我们勾选了第一个默认模板!它是一个最最简单的空白项目。仅仅是一些最最基础的文件构造。vue版本选择,推荐大家都选择2.(如果你非常擅长3也可以选择3.);

然后直接点击按钮【创建】即可快速看见项目搭建完成了。(因为它很小很小,东西很少。所以几乎是1秒就 完成创建了)。


 

如图所示,项目里面是非常简单的,文件页面(pages:存放的都是我们的将来和用户交互的页面组件代码内容。);static(存放一些静态的js,css,图片声音视频资源);


main.js是入口文件,一些额外的调用的插件也可以需要提前配置一下参数,项目启动之前会预先加载额外的插件到项目中来。


4:介绍了一下项目的基础文件概况之后,现在其实已经可以启动预览项目了。

 

顶部导航栏有一个运行,我们要么在内部内置的浏览器预览项目,要么运行到外部浏览器预览都是可以的。

如图,我这个是预览到内置浏览器的效果。可以看见,其实它打开之前,是经历了一个编译的!

而且列举出来了预览的本地入口地址信息。调用的都是本机ip信息。端口默认是8080

 


外部浏览器预览,也是非常简单的,声明:如果你发现无法打开的话,可以去配置一下外部浏览器的寻址路径信息。(就是那个外置浏览器的启动文件exe的路径信息,)

http://www.xdnf.cn/news/2007.html

相关文章:

  • 多模态(3):实战 GPT-4o 视频理解
  • 线上图书借阅小程序源码介绍
  • 系统测试的技术要求
  • 基于Docker的Flask项目部署完整指南
  • 基于C#+Unity实现遇见李白小游戏
  • 《强势量价关系》速读笔记
  • 【信息系统项目管理师】高分论文:论人力资源管理与成本管理(医院信息系统)
  • 【Python数据分析】Pandas模块之pd.concat 函数
  • 【Agent】LangManus深度解析:AI自动化框架的对比与langgraph原理
  • openwrt查询网关的命令
  • Flink部署与应用——部署方式介绍
  • 更智能的银行体验:生成式 AI 与语义搜索的实际应用
  • windows服务器及网络:搭建FTP服务器
  • 【AIGC】基础篇:VS Code 配置 Python 命令行参数调试debug超详细教程
  • DeepSeek 赋能全流程数据治理:构建智能化数据价值链
  • vue3中的effectScope有什么作用,如何使用?如何自动清理
  • 传感器模块有助于加速嵌入式视觉开发
  • 最新大模型算法的研究进展与应用探索
  • SIEMENS PLC程序解读 -BLKMOV (指定长度数据批量传输)
  • 六、web自动化测试02
  • 0基础 | Proteus仿真 | 51单片机 | 继电器
  • BitNet: 微软开源的 1-bit 大模型推理框架
  • 2024 年:Kubernetes 包管理的新前沿
  • CDGP|金融业数据价值迎来加速释放:数据治理策略该如何调整?
  • windows作业job介绍
  • springmvc-拦截器
  • 语音合成之六端到端TTS模型的演进
  • 【视频时刻检索】Text-Video Retrieval via Multi-Modal Hypergraph Networks 论文阅读
  • isEmpty和isBlank的底层原理和区别
  • 79. 单词搜索