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有一些区别 具体在官网文档中有详细说明