主题
uni-app 基础与环境搭建（二）
本页对应 uni-app 基础与环境搭建，共 8 段视频，约 1 小时 4 分。
学习目标
- 能独立在 HBuilder 中安装并配置 Prettier 插件，设置
*.vue等生效范围，创建.prettierrc配置文件，并通过“重排”验证代码格式化生效。 - 能按正确顺序完成 HBuilder 基本配置，包括制表符改为 2 个空格、启用保存时自动格式化、启用折叠最后一行，并说明先配置 Prettier 再开启自动保存的原因。
- 能在
uni.scss中定义$开头的样式变量，并在.vue文件的<style lang="scss">中引用，验证变量全局生效。 - 能说明
App.vue中<script>与<style>分别对应小程序app.js与app.wxss，并能在其中编写全局生命周期逻辑和全局样式，且不在App.vue中编写<template>。 - 能在
pages.json中配置页面路径、页面style和globalStyle，验证页面标题修改及局部配置对全局配置的覆盖效果。 - 能配置
tabBar的list数组（2–5 项，包含pagePath和text），并在 H5 或小程序端验证底部导航切换效果。
知识点
先装插件：入口要会找，判断标准要清楚
为什么需要：课堂只讲有限功能，企业开发中随时可能要用新插件；不会装、不会配，就会卡在“工具都用不起来”。怎么想：插件不是装完就结束，还要设置生效范围，否则某些文件不会格式化。怎么做：HBuilder 里有两个入口——安装处直接点“配置”，或点“工具 → 设置 → 插件设置”。装过插件后，插件设置里才会出现对应内容；没装时这里基本是空的。易错点：不要选错设置项；找不到入口时优先走“工具 → 设置 → 插件设置”。转写里的“britier/creatier/printer”都应理解为 Prettier。
设置生效范围：让 .ts、.js 也进入格式化
为什么需要：默认生效范围可能只覆盖部分文件，在 .ts 里写代码时格式化不会生效，容易误以为插件坏了。怎么想：范围本质是“哪些文件交给 Prettier 处理”，要按项目实际文件类型补。怎么做：在插件设置的生效范围里加入 **/*.ts，再补 **/*.js，表示任意目录下的任意 .ts、.js 文件；多项之间用英文逗号分隔：
text
**/*.ts, **/*.js如果列表一开始是空白，可以先随便写一点再删掉，让列表出现，再补上需要的范围。易错点：逗号必须是英文；范围写错等于没配；没装插件时设置项可能不出现，不要误判为设置坏了。
创建 .prettierrc：把团队风格固定到项目里
为什么需要：代码格式化有风格差异：两个空格还是四个空格、要不要分号、单引号还是双引号。Prettier 不会擅自决定，项目要用配置文件告诉它。怎么想：企业里通常一个项目跟一个配置文件，目的是统一风格；配置文件应放在项目根目录，优先级高于编辑器里的同类设置。怎么做：在项目根目录右键，新建“自定义文件”，文件名写成 .prettierrc，粘贴常用配置：
json
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"vueIndentScriptAndStyle": true
}含义分别是：缩进统一为 2 个空格；不使用 Tab，而用空格；行尾不加分号；统一单引号；保留 Vue 文件中 <script> 和 <style> 的缩进。易错点：文件名和后缀不能写错；必须放根目录；JSON 不能写注释；配置项很多，不用背，先掌握这几个常见项。转写里提到 Prettier 配置会覆盖编辑器的 useTabs、tabWidth 等设置，所以两边要一致。
手动“重排”验证：首次弹窗别选内置
为什么需要：配置完必须验证，不能只看文件写没写。怎么想：先手动格式化一次，看是否符合预期；再决定是否开保存自动格式化。怎么做：在代码区右键，点“重排”（即格式化）。第一次可能出现弹窗，要选择自己安装的 Prettier，不要选 HBuilder 内置格式化。易错点：转写特别强调“不要选内置”；选错后效果可能不是项目配置的效果。若格式化没反应，先确认文件已保存、生效范围包含当前文件、根目录配置存在。
HBuilder 基本配置：缩进、自动保存与折叠
为什么需要：编辑器默认缩进、保存行为会影响格式化体验。怎么想：先让编辑器与 Prettier 风格一致，再开自动化；顺序错了容易被“半成品自动保存”坑。怎么做：在常用设置里把制表符改为 2，勾选“使用空格代替制表符”；在编辑器设置里勾选“保存时自动格式化”；需要折叠代码时仍能看到开始和结束标签，可勾选“折叠最后一行”，勾选后按提示重新打开文档。易错点：转写明确提醒——先配好 Prettier 和 .prettierrc，再开“自动保存”。如果一开始就开自动保存，代码写到一半（例如 tabBar.list 还没写够两项）就被保存并报错，会误以为代码真错了。折叠最后一行不是代码丢失，只是结束标签不显示；需重开文档验证。
调试顺序：先配置、再验证、最后自动化
为什么需要：插件配置、格式化、自动保存互相影响，乱序排查成本高。怎么想：按“装插件 → 设范围 → 建配置 → 手动重排 → 开自动保存”的顺序走。怎么做：每步都保存并观察结果；不生效时先看是否保存、范围是否包含、弹窗是否选错、配置文件是否在根目录。易错点：不要一上来全开自动功能；不要改完不保存就判断失败。后续 uni-app 的 uni.scss、App.vue、pages.json、tabBar 配置也遵循同样思路：先配置，再运行验证，出现异常先检查保存、运行端和重启服务，而不是盲目改代码。
HBuilderX 插件配置：先装 Prettier
为什么需要：实际中讲的功能有限，将来进企业临时要装插件、配格式化，必须知道入口。怎么想：转写里的“britier/printer/creatier”都指 Prettier；先装插件，再谈格式化范围。怎么做：点“工具→设置→插件设置”，确认 Prettier 已安装；在格式化生效范围里补上 **/*.js，不要只留默认项。易错点：没装插件时插件设置页内容很少；范围不配，代码格式化可能不生效；设置入口也可从已安装插件处直接点“配置”跳转。
Prettier 配置文件：把团队规则落到项目根目录
为什么需要：两个人写代码，缩进、分号、单双引号不统一，提交后风格很乱。怎么想：Prettier 不擅自决定，项目根目录放配置文件，项目配置优先于编辑器默认。怎么做：在项目根目录新建 .prettierrc，写入常用项并保存：
json
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"vueIndentScriptAndStyle": true
}易错点：文件名不能写错，且要放在根目录；第一次设置页可能空白，随便写一点再删可触发显示；不要背所有配置项，先掌握缩进、分号、引号、Vue 缩进这几项。
HBuilderX 常用与编辑器配置
为什么需要：字号太小、缩进不一致、保存后格式乱，都会影响开发效率。怎么想：先在“常用设置”改项目管理字号、编辑器字号；字体本机没装就不要强求一致。怎么做：把制表符由 4 改成 2，并勾选“使用空格代替制表符”；到“编辑器”勾选“保存时自动格式化”和“折叠最后一行”。易错点：顺序很关键——先配好 Prettier，再开自动保存；否则代码写到一半就被保存并报错。文件名旁星号表示未保存，小圆点表示已保存，别把“没保存”当成代码不生效。
uni.scss：全局 Sass 变量
为什么需要：颜色、尺寸等样式要全局统一，不能每个页面重复写。怎么想：uni.scss 里定义 Sass 变量，任何文件都能用。怎么做：在 uni.scss 底部定义变量，例如 $uni-color: pink;，页面样式必须写 <style lang="scss"> 才能引用：
scss
$uni-color: pink;vue
<style lang="scss">
.demo {
background-color: $uni-color;
}
</style>易错点：Sass 变量必须以 $ 开头；漏写 lang="scss" 不会生效；第一次用 Sass 时 HBuilderX 会提示安装插件，可能报错并重启；转写中颜色没变，点“重新运行/重启服务”后才变成粉色。
App.vue：全局入口与全局样式
为什么需要：有些逻辑要全局监听，有些样式要全局生效。怎么想：App.vue 不是根组件；script 相当于小程序 app.js，style 相当于 app.wxss。怎么做：在 script 中写 onLaunch、onShow、onHide 等全局生命周期；在 style 中写全局类：
vue
<script>
export default {
onLaunch() {},
onShow() {},
onHide() {}
}
</script>
<style>
.text-red { color: red; }
</style>易错点：App.vue 里不要写 template；全局样式不要散落到各页面；全局生命周期监听要写在 App.vue 的 script 中。
pages.json：页面路径与窗口配置
为什么需要：页面必须注册，标题、窗口表现要配置。怎么想：pages 数组每项含 path 和 style；style 是页面局部配置，相当于页面 .json；globalStyle 相当于小程序 app.json 的 window，页面配置会覆盖全局。怎么做：改当前页标题就改该页 style.navigationBarTitleText；改全局标题就改 globalStyle。易错点：globalStyle 与 pages 平级；小程序端热重载有时不刷新，可重新运行或重开；转写中只开了 H5，改小程序标题当然看不到变化，要确认运行端。
tabBar 配置
为什么需要：底部导航是常见页面结构。怎么想：tabBar 与 globalStyle 平级；list 至少 2 项、最多 5 项；每项写 pagePath 和 text。怎么做：先新建页面并在 pages.json 注册，再配 tabBar：
json
{
"pages": [
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "学习uni-app" } },
{ "path": "pages/my/my", "style": { "navigationBarTitleText": "我的" } }
],
"globalStyle": { "navigationBarTitleText": "uni-app" },
"tabBar": {
"list": [
{ "pagePath": "pages/index/index", "text": "首页" },
{ "pagePath": "pages/my/my", "text": "我的" }
]
}
}易错点：list 只写 1 项会报错，自动保存时更容易“边写边报错”；未保存文件带星号，先看是否保存；页面路径没注册会打不开。没有安卓机时，转写还演示了云手机上传 APK 测试，免费 30 分钟，属于补充测试手段，不是必做配置。
本节要解决的两个现实问题
本节标题是“答疑和HBuilder动手机测试”，核心不是讲新语法，而是解决两个现实问题：一是格式化配置到底听谁的；二是没有苹果手机、甚至没有安卓手机时，怎样把做好的应用放到手机环境里看一眼。转写稿里出现的“语音手机”“云音手机”应统一理解为“云手机”，“preR / creatier”应理解为 Prettier。
为什么需要： 实际中讲的功能有限，但将来进企业会临时装插件、接手别人项目，还会遇到真机测试问题。怎么想： 先把“配置归属项目”和“测试手段有限”这两件事想清楚，再动手。怎么做： 先理解 Prettier 配置的项目化，再走一遍云手机测试流程。易错点： 不要把个人喜好当成团队规范，也不要把云手机当成模拟器。
答疑：Prettier 配置为什么跟项目走
为什么需要： 代码到底用两个空格还是四个空格、结尾要不要分号、用单引号还是双引号，不同公司、不同项目可能不一样。怎么想： 转写稿明确说，这不是个人随便定的，而是“根据开发团队的喜好来决定的”；你去 A 公司可能是两个空格，去 B 公司可能是四个空格；A 项目可能是四个，B 项目可能是两个。怎么做： 把 Prettier 配置理解成“一个项目跟一个配置文件”。以后接手别人项目时，把团队代码拉下来，里面可能已经配好了，要求团队统一两个空格、单引号等，目的就是统一代码风格。易错点： 不要以为自己习惯的格式就是全公司格式；也不要忽略项目里的配置文件。
苹果手机测试为什么实际中不展开
为什么需要： 很多同学用苹果手机，想在 iPhone 上直接跑，但这不是实际中能随便解决的。怎么想： 转写稿说得很直接：要在苹果手机上运行，需要有证书，证书每年 99 美元，不是 99 块；如果真做 iOS 开发、以后吃这碗饭，建议搞一个，但当前课程没必要。想在苹果模拟器跑，还得换苹果电脑，所以苹果开发成本高。怎么做： 实际中不影响学习，通过演示知道可以做多端开发即可；课下可以借同学的安卓手机，花十分钟跑一遍流程，有印象就达到目的。易错点： 不要把“不能当场用苹果手机跑”误解成“项目不能做多端”；也不要把 99 美元说成 99 元。
云手机测试的适用场景
为什么需要： 企业开发要测华为、小米、OPPO、vivo、魅族等很多型号，每个型号都买一套成本太高。怎么想： 云手机平台就是帮开发者做测试的：公司不愿买真实手机，就付服务费，平台提供云手机。转写稿强调，云手机不是模拟器，而是通过网络连接某房间里的真手机。怎么做： 选一个平台，转写稿中选的是腾讯云手机；注册、登录，进入“云手机”，选手机型号，选空闲设备。易错点： 云手机免费时长有限，转写稿说免费只有 30 分钟，玩完就要花钱；不要把它当成无限免费的真机。
云手机实操流程
为什么需要： 没有安卓机的同学需要一个能验证 APK 的途径。怎么想： 先有打包好的 APK，再上传到云手机，最后进入云手机安装、打开、填账号看数据。怎么做： 转写稿演示：登录后点“云手机”，选 vivo 等空闲设备；把打包好的 APK 上传；点“进入云手机”；在云手机里点安装，首次安装会自动打开；填账号后能看到数据。还提到自己剩余 23 分钟，说明免费时长要省着用。易错点： 上传的是 APK，不是源码；设备要选空闲的；安装后没自动打开就手动点；早期打的包可能有 bug，先试跑，不要慌。
打包入口与本节边界
为什么需要： 云手机要先有 APK，APK 从 HBuilder 的打包流程来。怎么想： 转写稿说入口在“发行 → 云打包”，但打包要填一些信息，稍微复杂，本节先不展开，后面再讲。怎么做： 本节先知道“云手机怎么用”，会发已经打包好的 APK，同学注册账号后上传演示；打包参数留到后续。易错点： 不要把“云打包”当成云手机；也不要在没讲参数时自己乱填，先理解流程边界。
没有安卓机时的替代方案
为什么需要： 不是每个人手里都有安卓机。怎么想： 开发大部分时间在网页里完成，开发完再到手机上看效果；自己的手机能跑就跑，不能跑就用云手机。怎么做： 先借同学安卓手机跑一遍流程，或用云手机上传 APK 验证；重点是把“网页开发 → 打包 → 手机验证”的链路走通。易错点： 不要因为设备限制就跳过验证；也不要把云手机当唯一手段，它只是测试补充。
代码示例
1. 项目根目录新建 .prettierrc（Prettier 格式化规则）
json
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"vueIndentScriptAndStyle": true
}要点解释：
tabWidth: 2：缩进统一为 2 个空格（团队约定 4 个就写 4，由项目定）。useTabs: false：不使用 Tab，用空格代替。这个值会被编辑器“常用设置”里的缩进项覆盖，所以 HBuilderX 里也要把制表符缩进改成2，并勾选“使用空格代替制表符”。semi: false：行尾不加分号；要加分号就写true。singleQuote: true：统一用单引号；要双引号就写false。vueIndentScriptAndStyle: true：保留.vue文件里<script>、<style>内容的缩进。
易错点：
- 文件名只有后缀没有名字，就是
.prettierrc，必须放在项目根目录下，放错目录不生效。 - 新建时选“自定义文件”，不要误建成
.js或.css。 - HBuilderX 里还要到 工具 → 设置 → 插件配置 → Prettier，把生效范围补上
**/*.js（多个用英文逗号分隔），否则.js文件不会被格式化。 - 第一次右键“重排”（格式化）会弹窗，要选自己安装的 Prettier，不要选“内置”。
- 顺序坑：先配好 Prettier，最后再开“保存时自动格式化”。否则改一半的代码被自动保存并格式化，会莫名报错。
2. pages.json（页面路径 + 全局配置 + tabBar）
json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "学习uni-app"
}
},
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/my/my",
"text": "我的"
}
]
}
}要点解释：
pages数组对应原生小程序的app.json的pages：每个页面都必须在这里注册，没注册的页面访问不到。- 每个页面的
style就是该页面的局部配置，相当于原生小程序里的页面.json，改navigationBarTitleText就能改标题。 globalStyle对应原生app.json的window，是全局窗口配置；页面自己的style会覆盖globalStyle（例子里全局叫 “uni-app”，首页显示 “学习uni-app”）。tabBar与globalStyle、pages是同级关系，写串行是最常见的“配了不生效”原因。list里每一项的pagePath不带.vue后缀，且必须已在pages中注册。
易错点：
tabBar.list至少 2 项、最多 5 项，只写一项会直接报错——所以先写好两个页面再保存。- 手写容易漏逗号/多逗号，保存后右键“重排”一下即可。
- 改完配置若页面没变化，先确认当前运行的是哪个端（只开了 H5 就看 H5），必要时重新运行。
3. uni.scss + App.vue（全局样式变量与全局样式）
uni.scss：
scss
/* 自定义全局样式变量，变量名必须以 $ 开头 */
$uni-color: pink;App.vue：
vue
<script>
export default {
onLaunch() {
console.log('App Launch：全局生命周期，相当于 app.js 的 onLaunch')
},
onShow() {
console.log('App Show')
},
onHide() {
console.log('App Hide')
}
}
</script>
<style>
/* 全局样式，相当于原生小程序的 app.wxss */
.pa {
color: red;
}
</style>页面中使用（例如 pages/index/index.vue）：
vue
<template>
<view class="pa">全局样式测试</view>
</template>
<style lang="scss">
.pa {
background-color: $uni-color;
}
</style>要点解释：
uni.scss里定义的变量是全局的，任何文件的<style lang="scss">中都能直接用。- 想用 SCSS 变量，
<style>标签必须加lang="scss"，否则变量不解析。 App.vue的<script>相当于原生小程序的app.js，全局生命周期（onLaunch/onShow/onHide）写在这里。App.vue的<style>相当于app.wxss，是全局样式。
易错点：
App.vue不能写<template>，它只有script和style两部分。- 第一次使用 SCSS，HBuilderX 会提示安装 sass 插件，装完会自动重启；若样式没生效，手动重启一下服务再看。
- 页面里写了同名类
.pa会覆盖全局的.pa，排查“全局样式不生效”时先看页面自身样式。
常见错误
现象： Prettier 对
.vue或.js文件不生效。
原因： 插件配置中的生效范围没包含对应后缀。
修法： 在插件设置里补上*.vue、*.js等匹配项，注意英文逗号。现象： 保存后频繁报错、代码被“提前”格式化。
原因： 先开了“保存时自动格式化”，Prettier 和配置文件还没配好。
修法： 先完成 Prettier 安装、范围和项目配置文件，再勾选保存自动格式化。现象： 右键重排后格式不符合预期。
原因： 弹窗中选了内置格式化器，没有使用刚安装的 Prettier。
修法： 出现选择框时选下面已安装的 Prettier，不要选内置项。现象： 新建的 Prettier 配置文件不生效。
原因： 文件没放在项目根目录，或文件名、后缀写错。
修法： 在项目最外层新建正确配置文件，确认位置和名称后再粘贴配置。现象：
tabBar配置后不显示或直接报错。
原因：tabBar与globalStyle层级写错，或list数量不足 2 个。
修法： 折叠pages.json检查同级关系；list保持 2–5 项，并补齐pagePath、text。现象： 新建页面能创建但访问不到。
原因： 页面没有注册到pages.json的pages中。
修法： 检查pages数组是否自动加入；没有则手动补上页面路径。现象：
uni.scss中定义的变量在页面里用不了。
原因： 变量名没以$开头，或样式块没加lang="scss"。
修法： 按 SCSS 变量语法定义，使用前确认样式块语言和插件安装状态。现象： 改了
App.vue或pages.json后页面没变化。
原因： 服务卡住、未重新编译，或当前运行平台不对。
修法： 先保存，必要时重启/重新运行对应平台，再检查全局配置是否被页面局部配置覆盖。
练习
完成 Prettier 插件安装与生效范围配置，使
.vue、.js文件都能被格式化；再新建项目根目录配置文件，并验证右键重排效果。调整 HBuilder 常用配置：编辑器字号、制表符为 2、使用空格代替制表符、保存时自动格式化、折叠最后一行，并说明为什么要注意配置顺序。
在
uni.scss中定义一个自定义颜色变量，在某个页面样式中使用它；若首次提示安装 SCSS 插件，完成安装并验证颜色生效。在
App.vue中写一个全局样式类，在首页使用并验证；再在pages.json中修改首页标题，观察页面局部配置与全局配置的覆盖关系。按设计稿配置一个包含 3 个页面的
tabBar：新建页面、确认pages.json注册、补齐list的pagePath和text，分别在 H5 和小程序端验证切换效果。
课堂画面
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | HBuilder插件配置 | 10:11 |
| 2 | HBuilder基本配置 | 06:43 |
| 3 | 答疑和HBuilder动手机测试 | 09:57 |
| 4 | uni-app全局文件-uni.scss | 10:09 |
| 5 | uni-app全局文件-App.vue | 07:40 |
| 6 | 答疑 | 02:07 |
| 7 | uni-app配置页面路径 | 07:42 |
| 8 | uni-app配置tabBar | 10:11 |
小结
- 插件安装不是重点，会配置、会排错、会验证生效范围才是重点。
- Prettier 配置要讲顺序：先插件与配置文件，后保存自动格式化，能少踩很多坑。
- 格式化弹窗出现时，要明确选择项目实际使用的格式化器，不要习惯性点默认。
pages.json是高频出错点，配置时先看层级，再看数组项，最后看页面是否注册。tabBar的list有数量约束，练习时不要只写一项就判断“没效果”。- 全局文件要分清职责：
uni.scss管全局样式变量，App.vue管全局逻辑与全局样式，页面配置优先看局部覆盖。 - 改配置不生效时，按“保存→看运行平台→重启/重新运行→查配置层级”的顺序排查。
- 云手机适合没有真机时的验证手段，但课堂重点是掌握流程和建立多端测试意识。