【uni-app】第1节构建、运行项目

1、安装开发工具HBuilderx

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

2、构建项目

     打开HBuilderx -  【文件】- 【新建】 -  【项目】 出现如下弹出窗口，按照提示完成即可

     说明：选择【uni-ui项目】因为有很多扩展组件可以直接用，具体组件看下官网：https://uniapp.dcloud.io/component/

  

 3、目录结构

说明：红色标注的文件是后期自己根据项目实际需求增加的，后面的笔记会说明具体怎么使用 api：接口文件 components：组件目录 pages：页面目录 static：静态资源（比如：图片等） uni_modules：扩展组件（uni-ui） unpackage：项目编译目录 utils: 自己封装的工具类 App.vue：应用配置，用来配置App全局样式以及监听应用生命周期 index.html ：基础模板入口文件 main.js ： 项目的入口文件 manifest.json：项目的基础参数配置（比如：配置应用名，打包版本，appid,logo等打包信息的配置文件） pages.json：项目的全局配置文件（比如模块路由、app基础样式还有底部菜单等） uni.scss：内置的常用样式变量 vue.config.js： 本项目用于配置跨域代理

 4、运行

以运行到浏览器和微信开发者工具为例：

• 运行到浏览器 按F12后点击小手机图标

• 运行到微信开发者工具

　　准备工作： 　　　（1）安装微信开发者工具                     下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html            （2）微信开发者工具设置-安全设置-开启服务端口  　　   　      　　 （3）HBuilderX中manifest.json配置微信小程序AppID                   说明：AppID需要在微信小程序官网申请

                 

       （4）HBuilderX中工具-运行配置