前言
uni-app 支持通过两种方式快速创建项目
- 可视化界面
- vue-cli 命令行
因为可视化的方式比较简单,HBuilderX 内置了相关环境,开箱即用,无需配置 Nodejs。我们接下来使用 HBuilderX 开发项目。
一、安装 HBuilderX
1.首先,在自己本地电脑安装编辑器:HBuilderX
- H 是 HTML 的首字母
- Builder 是构造者
- X 是 HBuilder 的下一代版本。
我们也简称HX
。
HBuilderX 是通用的前端开发工具,但为 uni-app
做了特别强化。
HBuilderX 的特点如下图所示:
安装之后可以看到界面是这样的:
二、创建项目
步骤:在点击工具栏里的文件 -> 新建 -> 项目。
然后我们会看见新建项目的弹窗,默认为普通项目,我们手动选择第二个 uni-app,手动输入项目名,系统会填入默认路径,但是个人可以根据需要进行修改,点击预览即可。
项目创建成功之后显示如下:
三、运行项目
步骤:在点击工具栏里的运行 -> 运行到浏览器 -> Chrome/Firefox/IE/Edge 等任意一个浏览器都可,首推 Chrome 。
运行成功之后,终端会有对应的提示:
我们到浏览器查看效果:
四、在微信开发者工具运行
除了浏览器,我们还可以在其他地方运行,接下来在小程序模拟器上运行。
如果是第一次使用,需要先下载微信小程序开发者工具,配置小程序 ide 的相关路径,并启动微信开发者工具,才能运行成功。
另外还需要在微信开发者工具–>设置–>安全设置–>开启服务端口
如下图,分别是在微信小程序开发者工具中开启服务端口,和在HbuiderX输入框输入微信开发者工具的安装路径。
此时我们退出 HX
,再重新进入之后运行,就可以了。
(图片来自官网)
终端显示如下:
微信小程序开发者工具显示效果如下:
五、uni-app 目录介绍
├── pages # 存放所有的页面
├── static # 存放静态资源,比如图片/视频/字体/图标等
├── App.vue # 项目根组件,页面都是在 App.vue 下进行切换的,可调用应用的生命周期
├── main.js # 项目入口文件,主要作用是初始化 Vue 实例并使用需要的插件
├── manifest.json # 应用的配置文件,用于指定应用的名称/图标/权限等
├── pages.json # 全局配置,决定页面文件的路径/窗口样式/原生的导航栏/底部的原生 tabbar等
├── uni.scss # 本文件里预置了一批 scss 变量预置,如按钮颜色/边框风格,