前言

uniapp 是一个跨平台的前端框架，可以帮助我们使用一套代码开发同时运行在多个平台（如小程序、App、H5 等）上的应用程序。

uniapp 基于 Vue.js 框架，开发者可以使用熟悉的 Vue.js 语法进行开发。它提供了一系列的组件和 API，用于构建各种界面和功能。我们只需要编写一次代码，就可以将应用程序打包成不同平台的应用，并且享受到原生应用的性能和体验。

除了跨平台开发的能力，uniapp 还提供了丰富的插件生态系统，可以满足我们在开发过程中的各种需求。例如，uniapp 支持与原生设备功能的交互，通过插件可以访问摄像头、地理位置、推送通知等功能。

开发工具

uniapp 是由 DCloud 公司开发的。DCloud 是一家专注于移动应用开发的技术公司，总部位于中国广东深圳。他们致力于提供跨平台的解决方案，使开发者能够使用一套代码构建运行在多个平台上的应用程序。除了 uniapp，DCloud 还开发了其他一些知名的产品，如 HBuilderX 开发工具和 DCloud 小程序开发者平台。

HbuilderX 编辑器链接自取方式->( https://www.dcloud.io/hbuilderx.html )

安装完之后在左下角自行用邮箱注册一个就好了，图示如下：


再选择新建项目之后：
填写好项目名称、选择模板、vue版本选择3

创建好之后：

文件作用讲解

文件pages： 所有页面文件存放的目录
文件static: 存放一些静态资源，比如静态图片
文件App.vue：在这里是存放css样式结构和生命周期
文件index.html：做了一些不同支持的兼容
文件main.js：初始化入口的文件
文件manifest.json：进行一个基本的多端配置
文件pages.json: 配置页面路由导航等信息的地方
文件uni.promisify.adaptor.js：app兼容性的配置
文件uni.css：提供一个全局的样式类

插件安装

去官网找自己所需的创建进行安装。
插件推荐：
– NPM
– 内置浏览器
– 内置终端
– App真机运行
– uni-app编译
– Git插件
– js-beautify
– prettier
– htmlhint
– stylelint
– eslint-plugin-vue
– eslint-js
– js压缩
– css压缩
– scss/sass编译
– es6编译

配置

端配置

uniapp 支持众多的端，包括微信小程序、支付宝小程序、百度小程序、字节跳动小程序、H5、App（基于原生混合开发）、快应用等。这意味着我们可以使用 uniapp 开发一次，就能在多个平台上发布和运行我们的应用程序，减少了重复开发的工作量。

运行配置

找到运行配置,填写好chrome浏览器安装路径

再找到下面微信开发者根据路径并填写好

运行

找到图中所示地方点击：

等待编译：

页面效果：

这样我们就初步完成了一个uniapp的体验

原文链接：https://juejin.cn/post/7325636428884377634 作者：吃火龙果的程序员