一、准备工作 1、uni-app开发官网下载Hbuilder开发工具，直接下载解压缩就可以用了
https://uniapp.dcloud.io/quickstart
2、HBuilder插件安装：工具——插件安装——APP真机运行/uni-app编译/stylelint/eslint-js/es6编译
二、创建uni-app项目 1、创建uni-app新项目并命名会生成一系列文件。
2、项目框架结构
文章图片
3、pages.json
包含所有页面（pages）及全局样式（globalStyle）
4、manifest.json
可视化界面设置
5、vue文件格式template（只包含一个view）
script
style
三、真机调试 1、Android机
打开手机开发者模式及USB调试——运行——运行到手机或模拟器
四、样式库的引用 4.1 引入官方css样式库
复制Hello uni-app项目中common/uni.css文件到自己项目中（创建同样的文件路径），并在App…vue文件中的style标签下添加 @import ‘./common/uni.css’;
4.2 引入自定义图标库
阿里巴巴矢量图标库——下载图标资源并将iconfont.css文件复制到common目录下，和引入官方css样式库一样在style标签下添加对应路径导入——参照demo引入图片资源
4.3 引入css动画库
Animator css中下载对应效果的css文件复制到common目录下，和引入样式库一样在style中调价对应路径导入动画库文件，并在对应显示动画的组件中添加animated + 对应动画效果名称即可。
【uni-app开发（一）（准备工作及环境配置）】4.4 设置全局属性globalStyle
文章图片
推荐阅读
- 学习笔记|uni-app开发小程序
- uni-app开发（四）（项目实战之仿糗百搜索页）
- uni-app开发（二）（基础组件及样式）
- uni-app开发（三）（项目实战之仿糗百首页）
- view里面内容左对齐或者右对齐
- uniapp 输入对话框 漂亮