什么是uni-app

官网地址：https://uniapp.dcloud.io/

uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯

一套代码编到14个平台，这不是梦想。眼见为实，扫描14个二维码，亲自体验最全面的跨平台效果！(在官网提供了14个平台的二维码)

环境准备

1.开发工具

HBuilderX

下载地址：https://www.dcloud.io/hbuilderx.html

HBuilderX的版本升级，可以通过"帮助->检查更新"来实现

安装步骤省略

2.安装uniapp插件

3.安装scss/sass插件

打开HBuilderX，点击工具选项，然后点击插件安装
进入插件安装界面，点击“安装新插件”，再点击“前往插件市场安装§…”,下载对应插件
找到“scss/sass编译”插件，进入下载界面，有“使用HBuilderX导入插件”和“下载插件zip”两种方式，请注意后面的注意事项
推荐使用 HBuilderX 导入插件

安装完成

创建或导入项目

1.项目结构

如果是默认uni-app模板项目，是没有components的。选择了uni-ui模板项目或其它模板项目时，相关新增的所有组件就会放到components里。如果我们只想按需获取，那就把里面的多余组件删掉即可。除此以外，按照个人习惯，如果项目中还要抽取公共组件，也放入其中（当然，也可以自己在新建文件夹）

pages存放项目的页面。

static存放项目静态资源，比如images。

store存放vuex。

unpackage存放打包后的文件，新建的项目是没有的。（使用微信开发者工具运行后，也会出现此文件夹）对于打包后的文件，还需要说的是：如果打包后，相关组件或者图片失去了效果，可能是打包后的相关内容的引用路径出现了改变，导致错误。一旦出现类似错误，大家可以留意一下。

App.vue是项目的根组件，所有页面都是在App.vue下进行切换的，是页面的入口文件，可以调用应用的生命周期函数。

main.js是项目的入口文件，主要作用是初始化vue实例并使用需要的插件。

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。