【第三趴】uni-app页面搭建与路由配置（了解工程目录结构、学会搭建页面、配置路由并成功运行）

几何心凉

已于 2022-12-25 10:21:02 修改

阅读量3.8w

点赞数 95

分类专栏：聚沙成塔【45天玩转uni-app】文章标签： uni-app vue.js 前端

于 2022-11-14 08:19:09 首次发布

本文链接：https://blog.csdn.net/JHXL_/article/details/127817784

版权

聚沙成塔【45天玩转uni-app】专栏收录该内容

4 篇文章 68 订阅

订阅专栏

本文是uni-app系列教程的第三部分，详细介绍了uni-app的工程目录结构，教你如何搭建页面并配置路由。通过创建新页面并运行，帮助初学者理解uni-app的工作流程。同时强调了pages目录、static目录、main.js、pages.json等关键配置文件的作用。最后，鼓励读者实践操作，以更好地学习uni-app。

摘要由CSDN通过智能技术生成

写在前面

聚沙成塔——每天进步一点点，大家好我是几何心凉，不难发现越来越多的前端招聘JD中都加入了uni-app 这一项，它也已经成为前端开发者不可或缺的一项技能了，所以凉哥为大家推出 聚沙成塔【45天玩转uni-app】专栏，帮助大家对 uni-app 进行学习和理解，uni-app可以通过一套代码多端发行，相信你掌握本语言后无论是毕设还是求职项目都可以说是锦上添花，妥妥加分项；快来订阅专栏跟着凉哥一起来感受 uni-app 为开发者带来的劲感吧！

上篇文章【第二趴】uni-app开发工具（手把手带你安装HBuilderX、搭建第一个多端项目初体验）为大家介绍我们的 uni-app 强大的开发工具 HBuilderX 并且带领大家搭建一个 uni-app 项目，并且带领大家将项目一套代码运行在了手机端、微信小程序端、还有H5端；让大家体验了一把一套代码多端运行的劲感，博主通过这边文章带大家认识我们的 uni-app 的目录结构和配置项，让我们能够个性的搭建自己的 app 页面；

工程结构

┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
│─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原生资源目录详见
├─hybrid App端存放本地html文件的目录
├─wxcomponents 存放小程序组件的目录
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss 这里是uni-app内置的常用样式变量

上面给大家介绍的目录结构是比较全面的，针对不同项目需求我们搭建出来的 uni-app 项目的目录结构也是有差异的，很多用不到的功能我们就无需集成到项目中去，也是用到哪里引入哪里；我们可以看到在第二篇文章中与大家搭建的 uni-app 结构如下，大家可以上下对比，了解一下我们基础版的目录结构都是做什么的；

在这里插入图片描述

从上至下，首先是我们的.hbuilderx文件，这个其实是我们开发工具 HBuilderX 的文件，大家不用特殊的去看；

pages 这里呢其实通俗点说就是我们的页面存放的文件夹，我们通常就是将一些业务页面都放在这个文件夹下，格式例如我们一个首页，就会在 pages 下面建一个 home 文件夹，然后在文件夹下面创建 home.vue；

static 相信这个大家都比较熟悉，从单词也能想到他的作用，就是存放我们项目中的一些静态文件，比如我们的图片，但是这里有个要注意的两个点编译到任意平台时，static 目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。还有就是 css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

unpackage 非工程代码，一般存放运行或发行的编译结果，这个是什么意思呢，其实大家可以理解成为他并不是我们编写的代码，也不需要我们做什么，就是我们在运行过程或者是打包过程他自己生成的一些环境、基座、包类的东西；

app.vue 应用配置，用来配置App全局样式以及监听，就是说我们的 app 打开后会来到这里，我们可以在这里进行一些特殊的操作，因为这里可以监听到 app 的生命周期，而且我们的一些全局的样式可以放到这里；

main.js 跟 Vue 中相同，是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。

manifest.json 配置应用名称、appid、logo、图标、版本、权限等打包信息全部都是在这里配置，这里可以通过可视化进行配置，也可以通过代码段，来进行设置；

pages.json 配置页面路由、导航条、选项卡等页面类信息，上面我们说到我们的页面都是放在 pages 文件夹中，那么这里其实就是我们需要配合 pages 配置路由信息然后对应上页面，我们的项目就可以实现路由跳转页面切换了，如同我们 Vue 中的 route 配置；

uni.scss 这里是uni-app内置的常用样式变量，可以通过在这里创建出一些系统中的样式变量同意设置，有助于我们对整个项目样式风格的统一管理，例如我们创建一个主题颜色的变量，然后我们在业务页面中对一些颜色设置都用此变量，这样我们可以通过改变这里的值对整体的项目风格进行更换；

新页面呈现

各位伙伴，本专栏看到这里，我们貌似都是在听，除了通过可视化搭建了自己的项目，还没有便携任何代码；这里博主就带领大家搭建个非常简易的两个页面，然后实现切换，大家感受一下；在uni-app项目中，一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染；

如果我们想在 uni-app 搭建新的页面并且能够让页面呈现出来，其实我们需要两步，一个是在 pages 中进行新页面的搭建，一个是需要我们在 pages.json 文件中进行配置，未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略，下面来带大家操作一下；

在这里插入图片描述

我们右键 pages 文件夹=》新建页面；会出现下面的弹窗，我们来看一下里面的内容，一个是页面的昵称，我这里取名 home 我们看到右侧有一个创建同名目录，这里我们勾选上，我们在上面讲到我们 pages 中的文件格式都是文件夹里面是文件格式例如我们一个首页，就会在 pages 下面建一个 home 文件夹，然后在文件夹下面创建 home.vue；所以我们勾选上这里就省去了我们自己要创建目录的步骤，我们还可以看到下面选择模板，这个后续小伙伴可以根据自己的需求选择即可；

在这里插入图片描述

在上面截图中我们看到下面有一个选项是在pages.json 中注册，这个的话我们上面也提到了一点是说如果我们新建页面需要在项目中运用，需要我们在 pages.json 中配置不然项目无法编译上我们的页面，所以这里如果我们勾选上这个选项， HBuilderX 会自动为我们在 pages.json 中添加上基础的配置，省去我们自己配置的步骤，开发更方便；我们点击创建；

在这里插入图片描述

能够看到我们的 pages 文件夹中多了 home 文件夹下面还包含 home.vue 文件，而且在我们的 pages.json 配置文件中也自动为我们添加了关于 home 页面的注册配置；我们新建的 home.vue 页面中还是基础版本，现在我们将 home.vue 文件中的基础代码更换一下，然后看一下效果；

<template>
	<view>
		<view class="title_box">
			几何心凉，早上好
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.title_box{
		background-color: #f6b2fc;
		width: 100vw;
		height: 10vh;
		text-align: center;
		line-height: 10vh;
		color: aquamarine;
	}

</style>

如果大家对前端不够熟悉的话，可以直接拷贝上面代码到 home.vue 中去，上面代码是非常简单一点前端样式代码；因为过于简单我们就不解释了，现在我们运行我们的项目到浏览器中，运行=》运行到浏览器=》Chrome

在这里插入图片描述

如果你运行后不是这个页面而是 hello 页面，那你可以看一下你的浏览器的 url 是否是 pages/home/home 如果不是的话自己调整即可，这里的地址就是我们在 pages.json 中配置的哦；为什么有的人运行就是几何心凉早上好有的人会是 hello 呢？这个是因为我们如果是在 HBuilderX 中正好打开的是 home.vue 文件运行后就是默认当前页面，如果你打开的并不是 home.vue 页面，uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）

写在最后

你的新页面搭建运行成功了么？可能很多人不明白里面的内容，或者是一些没有接触过前端的伙伴根本看不明白，没关系哈，建议大家如果看不懂 home.vue 中的代码内容还是要去学习一下前端基础的；如果是有前端基础的伙伴对一些配置文件不是很清晰没有问题，我们本篇的目标就是让大家能够跟着博主来搭建出新的页面并且成功运行即可；下篇文章为大家带来更多我们可以在页面中做的事情；如果你觉得本篇内容对你有帮助，期待你的订阅，订阅后你可以通过下方名片找到我，带你进群我们一起学习成长！

本期推荐

在这里插入图片描述

本书以“零基础”为起点，系统地介绍了uni-app的跨平台开发与应用。全书内容分为3篇，共12章，具体安排如下。
第一篇：基础篇，包括第1_{4章，主要介绍了uni-app的特点和优势、环境搭建、HBuilderX开发工具的安装和使用，以及uni-app的一些基础知识。第二篇：进阶篇，包括第5}9章，主要介绍了uni-app的基础配置、相关组件、导航栏、高效开发技巧，以及uniCloud云开发平台。第三篇：实战篇，包括第10~12章，通过第一个实战，介绍了如何使用uni-app开发小程序；通过第二个实战，介绍了如何使用uni-app进行跨平台开发；通过第三个实战，介绍了如何使用uniCloud云开发。需要的朋友可以找到我；