对于一个前端从业者，特别是刚入行不久的前端小白，我们工作中必须面对的一个问题就是——如何开发一套代码可以同时满足（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-demo
现在我们的基础工程创建已完成：如图：
uniapp-demo
接下来、为了提高我们开发效率，我们需对uniapp的组件、API做一个全面了解。
欢迎大家收藏、点赞和转发，我们一起学习成长！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。