【uni-app的基本使用流程-创建运行项目】

使用uni-app基本开发流程

uni-app基本介绍

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

开发工具的选用

1. HBuilder X(官方推荐)下载地址
   HBuilderX是通用的前端框架，为uni-app做了强化
2. 微信开发者工具下载地址
   配合HbuilderX调试微信小程序
3. Google Chrome
   运行调试项目

初始化和运行项目

• 点击HbuilderX菜单栏文件>项目>新建
• 选择uni-app,填写项目名称，项目创建的目录
  +至此你可以看到如下的目录结构（12为项目名称）
  

项目目录介绍

• pages所有的页面存放目录
• static存放静态资源 图片之类的
• App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
• main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
• manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
• pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
• uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

页面修改和运行

• 在pages页面中打开index.vue
• 在其中修改样式 数据等
• 导航栏点击运行 运行到浏览器 选择Chrom
• 至此你的uni-app项目已经运行起来了

新建页面路由的添加

• pages页面单击右键 新建一个uni-app页面
• HBuilderX会帮你在pages.json中注册路由信息