uniapp开发环境及项目创建

uniapp官网：https://uniapp.dcloud.net.cn/tutorial/ 

使用HBuilderX编辑器 点击 文件 -> 新建 - > 项目

创建好之后的目录结构

uniapp项目目录详细结构 

┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放uni_module 详见
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量

 找到项目中的index.vue文件，点击运行选择运行到内置浏览器

第一次使用HBuilderX 点击运行到内置浏览器就会自动安装内置浏览器插件

这里项目中的<view><view/>标签代替了<div>标签 

在外置浏览器运行：点击 运行到外置浏览器 在浏览器中按F12打开控制台

 如果是开发小程序的话可以安装使用小程序模拟器

在微信开放平台中下载安装微信开发者工具

 安装好之后在HBuilderX中点击运行设置

 将小程序运行配置的工具路径设置为安装的微信开发者工具目录下的.exe文件

并且把微信开发者工具设置中的服务端口打开

运行点击小程序模拟 -> 微信开发者工具运行 

自动打开微信开发者工具并运行

 对于整体开发所用到的标签组件与之前pc端vue有一些区别 具体在官网文档中有详细说明