如何从零开始拆解uni-app开发的vue项目(一)

uni-app项目分析:

背景:最近接手一个前同事留下的半拉子项目,出拿过来觉得很简单;当我看到app.vue的时候很确定是vue项目,心里不怎么慌,果断安装node.js,然后就去npm ;安装VS code,事实并不是我期盼的那样,或者说根本就不能运行。

报错:应用vs code打开文件,输入命令npm run dev,项目根本就没有运行,一直显示缺少一个package.json文件。

最后由于进度问题,只能去找前同事,听他说前端这几年变化挺大,项目可能适用的是其他编译器,再三辗转确定是HBuilder X。 

一番操作之后,我下载了HBuilder X之后,运行项目其实也不是很顺利,因为这个编译器虽然是免安装的,但是运行之后就会提示缺少运行的插件,还好都是无脑安装。

项目运行后才发向,项目根本没有后台服务,当时心中有一万只羊驼一闪而过;这样的项目怎么还说是成功运行的?不管三七二十一,我先利用HBuilderX的内置管理器进行运行,登录的界面如下:

为了进一步弄清uni.app开发程序的架构,首先打开APP.vue希望从这里查到一点蛛丝马迹,如下图所示:

上图可以看到这个文件只有style样式和默认的Script方法;于是乎我只能从pages.json

这里的json文件都是一些路径组合,从 注解中了解到uni.app开发vue程序的启动格式:

//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages

之后点击完对应的参考了解到:

 pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。

 以下是一个包含了所有配置选项的 pages.json :

{"pages": [{"path": "pages/component/index","style": {"navigationBarTitleText": "组件"}}, {"path": "pages/API/index","style": {"navigationBarTitleText": "接口"}}, {"path": "pages/component/view/index","style": {"navigationBarTitleText": "view"}}],"condition": { //模式配置,仅开发期间生效"current": 0, //当前激活的模式(list 的索引项)"list": [{"name": "test", //模式名称"path": "pages/component/view/index" //启动页面,必选}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "演示","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents":{"collapse-tree-item":"/components/collapse-tree-item"},"renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染"pageOrientation": "portrait", //横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape"rpxCalcMaxDeviceWidth": 960,"rpxCalcBaseDeviceWidth": 375,"rpxCalcIncludeWidth": 750},"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","height": "50px","fontSize": "10px","iconWidth": "24px","spacing": "3px","iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+"list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/562616.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ vector容器类型

vector类为内置数组提供了一种替代表示&#xff0c;与string类一样 vector 类是随标准 C引入的标准库的一部分 &#xff0c;为了使用vector 我们必须包含相关的头文件 &#xff1a; #include <vector> 使用vector有两种不同的形式&#xff0c;即所谓的数组习惯和 STL习…

什么是浏览器指纹识别?Maskfog指纹浏览器有用吗?

浏览器指纹识别是好是坏&#xff1f;这现在确实是一个有争议的话题。83%的消费者经常或偶尔会根据浏览历史记录看到广告。其实这就是利用了浏览器指纹技术。 如果您想了解浏览器指纹识别是什么&#xff0c;那就看下去&#xff01; 一、什么是浏览器指纹识别 浏览器指纹是指无…

01.重新认识文件(Linux基本概念)

知识引入&#xff1a; 我们经常使用word或者wps写的论文、作业等都是文件&#xff0c;而我们这样对文件的认识也比较片面。我们是否思考过&#xff0c;如果文件里面没有写东西&#xff0c;那么计算机会不会保存呢&#xff1f;答案是&#xff0c;肯定会的。因为我们每次建的空文…

Mysql---备份恢复

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.Mysql日志类型 错误日志&#xff1a; 错误日志主要记录如下几种日志&#xff1a; 服务器启动和关闭过程中的信息 服务器运行过程中的错误信息 事件调度器运行一个时间是产生的信息 在从服…

unity学习(68)——相机/模型的旋转/位置计算

这个比想象中要难&#xff0c;而且需要自己写。 1.相机可以转xy两个位置&#xff0c;可以点头和转圈。注意这里有一个if判断&#xff08;后面返回来发现了这些问题&#xff09; 2.角色不能点头&#xff0c;只能转圈。 难得是移动方向&#xff0c;因为移动方向(位置)和转向是相…

unicloud 云函数 介绍及使用

普通云函数 callFunction方式云函数&#xff0c;也称之为普通云函数。 uni-app的前端代码&#xff0c;不再执行uni.request联网&#xff0c;而是通过uniCloud.callFunction调用云函数。 callFunction方式避免了服务器提供域名&#xff0c;不暴露固定ip&#xff0c;减少被攻击…

浅析扩散模型与图像生成【应用篇】(十一)——DDIBs

11. Dual Diffusion Implicit Bridges for Image-to-Image Translation 该文提出一种双扩散隐式桥&#xff08;Dual Diffusion Implicit Bridges&#xff0c; DDIBs&#xff09;方法用于图像转换&#xff0c;其最大的特点在于处理源域图像的模型和处理目标域图像的模型是彼此分…

软考 网络工程师 每日学习打卡 2024/3/22

学习内容 第9章 网络操作系统与应用服务器 本章主要讲解&#xff1a;了Windows和Linux操作系统的基础知识&#xff0c;并详细讲述了常用的各种服务器的 配置方法。这一章的内容主要是在具体操作方面&#xff0c;网络工程师要能够熟练地配置各种网络服务 器&#xff0c;排除网络…

Mysql数据库深入理解

目录 一、什么是数据库 二、Mysql基本架构图 1.Mysql客户端/服务器架构 2.客户端与服务器的连接过程 3.服务器处理客户端请求 4.一条查询SQL执行顺序 4.1连接器 4.2查询缓存 4.3解析器 4.4执行器 4.4.1预处理阶段 4.4.2优化阶段 4.4.3执行阶段 5.一条记录如何存…

基于springboot+vue的物资仓储物流管理系统(源码+论文)

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

自动驾驶感知新范式——BEV感知经典论文总结和对比(一)

自动驾驶感知新范式——BEV感知经典论文总结和对比&#xff08;一&#xff09; 博主之前的博客大多围绕自动驾驶视觉感知中的视觉深度估计&#xff08;depth estimation&#xff09;展开&#xff0c;包括单目针孔、单目鱼眼、环视针孔、环视鱼眼等&#xff0c;目标是只依赖于视…

(2023,图像放大与超分辨率,扩散,缩放堆叠表示,多分辨率混合,多尺度联合抽样)Ten 的生成能力

Generative Powers of Ten 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 2. 相关工作 4. 方法 4.1. 缩放堆叠表示 4.2. 多分辨率混合 4.3. 多尺度一致抽样 4.4. 基于照片…