uniapp入门到进阶 一 1、如何使用uniapp创建项目工程(uniapp怎么创建项目)

对于一个前端从业者,特别是刚入行不久的前端小白,我们工作中必须面对的一个问题就是——如何开发一套代码可以同时满足(H5、APP、小程序),同时我们还可以兼顾到PC端,面对微信、抖音、头条、支付吧、百度等不同的平台,我们又如何同时满足各端小程序要求。面对这样的问题需要解决,我们就需要玩转uniapp, 这也成为了一个对前端工作人员的硬性要求,那我们是否是一个完全合格的前端工作人员呢?接下来让我们一起从零起步,快速高效玩转uniapp。

Uniapp 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码,Uniapp 将其编译到iOS、Android、H5、以及各种小程序平台。

我们在实际开发中可能遇到同一个项目可能需要分别在H5 端,小程序端,甚至React Native 端有相同的表现,我们就需要开发和维护多端不同代码,工作量是非常巨大的。因此我们的项目需要借助uiapp来实现。

如何创建工程?

随着VUE3使用的普及,下面我们所介绍的所有内容过我们都讲过基于VUE3来创建。

在这里我们要注意:为了增强项目灵活性高,不建议使用可视化界面(即编辑器-HBuilderX)来创建工程,因此,我们接下来使用cli脚手架创建工程。

一、首先确保全局安装 vue-cli

npm install -g @vue/cli

二、创建uni-app

使用正式版(对应HBuilderX最新正式版)

vue create -p dcloudio/uni-preset-vue my-project

使用alpha版(对应HBuilderX最新alpha版)

//该版本可能具有一些不稳定性vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

使用Vue3/Vite版

创建以 javascript 开发的工程

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

创建以 typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

接下来我们创建我们的项目 uniapp-demo

1、首先打开我们的命令行工具,找到我们要创建工程的位置

//我们把项目创建到我们的桌面1、cd Desktop

2、创建 typescript 项目 uniapp-demo

npx degit dcloudio/uni-preset-vue#vite-ts uniapp-demo

3、进入我们的项目并安装依赖

//进入项目cd uniapp-demo //安装以来yarn install

操作步骤如图:

uniapp入门到进阶 一 1、如何使用uniapp创建项目工程(uniapp怎么创建项目)

创建工程uniapp-demo

现在我们的基础工程创建已完成:如图:

uniapp入门到进阶 一 1、如何使用uniapp创建项目工程(uniapp怎么创建项目)

uniapp-demo

接下来、为了提高我们开发效率,我们需对uniapp的组件、API做一个全面了解。

欢迎大家收藏点赞转发,我们一起学习成长!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年3月20日 上午9:41
下一篇 2023年3月20日 上午9:51

相关推荐

  • 微软开源基于 Excel 的低代码语言 Power Fx(微软低代码开发)

    近日,微软推出了一款受 Excel 公式启发的低代码语言 PowerFx。 虽然 PowerFx 将成为整个微软自己的低代码 Power Platform 编写逻辑定制软件的标准,…

    科研百科 2024年5月16日
    116
  • 用户管理系统项目的说明

    用户管理系统项目说明 用户管理系统是一种用于管理组织内用户信息和数据的软件系统。在这个系统中,用户可以访问和组织他们的个人信息、权限和活动。用户管理系统可以帮助组织提高用户安全性、…

    科研百科 2025年6月29日
    1
  • 投资巨大的科研项目

    投资巨大的科研项目 近年来,随着科技的飞速发展,许多科研项目投资巨大,引起了广泛关注。这些项目不仅能够推动科学技术的进步,还能够为社会带来巨大的经济效益。 例如,最近一项投资巨大的…

    科研百科 2025年2月27日
    0
  • 影视制片项目管理

    影视制片项目管理 影视制片项目管理是影视制作过程中至关重要的一环。项目管理者需要协调各个部门之间的工作,确保项目的顺利推进,并且最终完成高质量的影视作品。本文将介绍影视制片项目管理…

    科研百科 11小时前
    1
  • 系统项目管理师中级公式

    系统项目管理师中级公式是指系统项目管理师在中级阶段需要掌握的公式,这些公式涵盖了系统项目管理中的重要方面,包括项目计划、风险管理、进度管理、质量管理和成本管理。系统项目管理师中级公…

    科研百科 2025年7月1日
    1
  • 工程项目智慧管理系统

    工程项目智慧管理系统 随着科技的不断发展,工程项目管理也在不断地升级。传统的工程项目管理方法已经无法满足现代项目的需求,因此,开发一款现代化的工程项目智慧管理系统成为了必然的选择。…

    科研百科 2025年1月17日
    0
  • 科研项目报告抄袭

    科研项目报告抄袭 科研项目报告抄袭是一种严重的学术不端行为,它不仅损害了科研界的声誉,还可能导致科研项目的无法进行,甚至对研究人员的职业生涯造成严重影响。因此,在科研界,严格遵守学…

    科研百科 2025年2月17日
    1
  • 国内外最顶级的十大敏捷项目开发管理工具盘点(项目管理 敏捷开发)

    随着敏捷的普及,支持其开发模式的工具也越来越多。它和瀑布工具的巨大差异在于一个是任务管理模式,一个是需求驱动管理模式。在这里,我列出了在国内外最知名最好用的敏捷工具及其网站。 1、…

    科研百科 2023年8月1日
    334
  • 兵器工业集团科研项目专项审计方案

    兵器工业集团科研项目专项审计方案 近年来,兵器工业集团在科技创新方面取得了显著的进展,科研项目的数量和规模不断增大。为了确保科研项目的顺利进行和科研成果的质量,有必要对科研项目进行…

    科研百科 2024年11月15日
    4
  • 科研项目质量管理.pdf(科研项目质量管理的重要性)

    质量阀管理培训教材 文章转载自微信公众号,需要下载PPT源文件,访问下面链接: 如何做好项目研发质量?可以借鉴质量阀管理模式!(可下载)

    科研百科 2022年5月14日
    654