【uni-app】初始化相关配置

(1)工程目录结构

┌─components            uni-app组件目录
│  └─comp-a.vue        可复用的a组件
├─hybrid                存放本地网页的目录(自建)
├─platforms             存放各平台专用页面的目录(自建)
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue      index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录(自建)
├─common                公共资源(自建)
├─api                   请求封装(自建)
├─store                 状态管理(自建)
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

提示

  • static下目录的 js 文件不会被 webpack 编译,里面如果有 es6 的代码,不经过转换直接运行,在手机设备上会报错。所以less、scss等资源同样不要放在 static目录下,建议这些公共的资源放在common目录下

(2)应用配置 manifest.json

manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等,我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器

(3)编译配置 vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被自动加载,一般用于配置 webpack 等编译选项。官方文档

(4)全局配置 page.json

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json页面管理部分。

官方文档

属性类型必填描述
globalStyleObject设置默认页面的窗口表现
pagesObject Array设置页面路径及窗口表现
easycomObject组件自动引入规则
tabBarObject设置底部 tab 的表现
conditionObject启动模式配置
subPackagesObject Array分包加载配置
preloadRuleObject分包预下载规则

(5)全局样式 uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。官方文档

uni-app 官方扩展插件(uni ui)及 插件市场 上很多三方插件均使用了这些样式变量,如果你是插件开发者,建议你使用 scss 预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App。

uni.scss是一个特殊文件,在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个 uni.scss,使得每个 scss 文件都被注入这个uni.scss,达到全局可用的效果。如果开发者想要less、stylus的全局使用,需要在vue.config.js中自行配置webpack策略。

(6)主组件 App.vue

App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素 template模板语法。

这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听,在页面监听无效。

(7)入口文件 main.js

main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

官方文档

(8)UniAPP 开发规范及资源路径

  1. 开发规范约定
  • 页面文件向导 Vue单文件组件(SFC)规范
  • 组件标签靠近小程序规范,详见 uni-app 组件规范
  • 互连能力(JS API)靠近微信小程序规范,但需要将替换替换 wx 为 uni ,详见uni-app接口规范
  • 数据绑定及事件处理同 Vue.js 规范,同时补充了 App 和页面的生命周期
  • 为兼容多端运行,建议使用 flex 布局进行开
  1. 资源路径说明

template 内约会静态资源,如 image,video 等标签的 src 属性时,可以使用相对路径或绝对路径,形式如下:


<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

注意

  • @ 初始的绝对路径以及相对路径会通过 base64 转换规则校验
  • 约会的静态资源在非 h5 平台,均不转为 base64
  • H5平台,小于4kb的资源会被转换成base64,其余不转

js 文件或 script 标签内,可以使用相对路径和绝对路径,形式如下:


// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

css 文件或 style 标签内,可以使用相对路径和绝对路径,形式如下:


/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

css 文件或 style 标签内引用的图片路径,可以使用相对路径也可以使用绝对路径,形式如下:


/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

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

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

相关文章

【Linux运维系列】vim操作

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

linux系统消息中间件rabbitmq普通集群的部署

rabbitmq普通集群的部署 普通集群准备环境查询版本对应安装rabbitmq软件启动创建登录用户开启用户远程登录查看端口 部署集群创建数据存放目录和日志存放目录:拷⻉erlang.cookie将其他两台服务器作为节点加⼊节点集群中查看集群状态创建新的队列 普通集群准备环境 配置hosts⽂件…

Matlab自学笔记二十七:详解格式化文本sprintf各参数设置方法

1.一个程序引例 上篇文章已经介绍了格式化文本的初步应用&#xff0c;程序示例如下&#xff1a; sprintf(|%f\n|%.2f\n|%8.2f,pi*ones(1,3)) 2.格式化操作符各字段的含义解析 格式化操作符可以有六个字段&#xff0c;只有主字符%和转换格式是必需的&#xff0c;其他都是可选…

数据库安全性与完整性设计

文章标签集合[数据库安全,数据敏感,通信安全,MD5,盐加密] 1 系统设计 1.1设计目标 &#xff08;1&#xff09;确定系统中需要保护的敏感数据和通信内容&#xff1b; &#xff08;2&#xff09;设计合适的签名、加密和解密算法&#xff1b; &#xff08;3&#xff09;实现…

【前端素材】推荐优质后台管理系统Uena平台模板(附源码)

一、需求分析 后台管理系统&#xff08;或称作管理后台、管理系统、后台管理平台&#xff09;是一种专门用于管理网站、应用程序或系统后台运营的软件系统。它通常由一系列功能模块组成&#xff0c;为管理员提供了管理、监控和控制网站或应用程序的各个方面的工具和界面。以下…

DAY33--learning English

一、积累 1.testify 2.sanctuary 3.assauslt 4.grocery 5.peg 6.figure 7.carton 8.bruise 9.dangle 10.script 11.lad 12.manipulate 13.molecule 14.shuttle 15.gutter 16.drastic 17.wag 18.rear 19.nail clipper 20.cereal 二、练习 1.牛津原译 Testify v. /ˈtestɪfaɪ…

通配符证书的作用

通配符证书是一种 SSL/TLS 证书&#xff0c;可用于保护多个域&#xff08;主机&#xff09;&#xff0c;由域名字段中的通配符 (*) 指示。这种证书主要用于具有许多子域的组织。通配符证书对主域及其所有一级子域有效。例如&#xff0c;一个针对 *.example.com 的通配符证书可以…

CleanMyMac2024一款备受赞誉的mac电脑垃圾清理软件

在数字世界中&#xff0c;我们的Mac不仅仅是一台电脑&#xff0c;更是我们工作、娱乐和生活的得力助手。然而&#xff0c;随着时间的推移&#xff0c;系统垃圾、无用文件和缓存不断堆积&#xff0c;让Mac变得迟钝&#xff0c;甚至威胁到我们的数据安全。此刻&#xff0c;您需要…

linux---nginx基础

目录 一、Nginx的概念 二、Nginx常用功能 1、HTTP(正向)代理&#xff0c;反向代理 1.1正向代理 1.2 反向代理 2、负载均衡 2.1 轮询法&#xff08;默认方法&#xff09; 2.2 weight权重模式&#xff08;加权轮询&#xff09; 2.3 ip_hash 3、web缓存 三、基础特性 四…

Centos配置SSH并禁止密码登录

CentOS8 配置SSH使用密钥登录并禁止密码登录 一、概念 SSH 为 Secure Shell 的缩写,SSH 为建立在应用层基础上的安全协议。SSH 是较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性的协议。 SSH提供两个级别的认证&#xff1a; 基于口令的认证 基于密钥的认证 基本使…

探索低代码开发:编程新时代的开启

低代码开发是一种基于图形化界面和可视化编程的新型软件开发方法&#xff0c;旨在降低软件开发的技术门槛&#xff0c;提高开发效率和灵活性。本文将介绍低代码开发的定义、特点、优势以及示例代码&#xff0c;帮助读者了解低代码开发的概念及其在实际应用中的意义。 1. 什么是…

【Java程序员面试专栏 算法思维】二 高频面试算法题:二分查找

一轮的算法训练完成后,对相关的题目有了一个初步理解了,接下来进行专题训练,以下这些题目就是汇总的高频题目,本篇主要聊聊二分查找,包括基础二分,寻找目标值的左右边界,搜索旋转数组以及波峰,以及x的平方根问题,所以放到一篇Blog中集中练习 题目关键字解题思路时间空…

python实现线下缓存最优算法

对于现代计算机为了加快数据存储速度&#xff0c;一般会采用多级缓存的方法&#xff0c;以最简单的二级缓存来说&#xff0c;数据会存放在两个地方&#xff0c;一个地方就是存在内存当中&#xff0c;另一个存放的地方就是存放在硬盘当中&#xff0c;但是这两个地方数据读取的速…

Spring Boot使用MongoDB详解

点击下载《Spring Boot使用MongoDB详解》 1. 前言 本文将详细介绍如何在Spring Boot项目中集成MongoDB数据库&#xff0c;包括其原理、使用流程、步骤以及完整的代码示例。通过本文&#xff0c;读者将能够了解Spring Boot与MongoDB的集成方式&#xff0c;掌握在Spring Boot应…

matlab滤波器设计

1、内容简介 略 51-可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 matlab滤波器设计-butter、ellip、cheby1、cheby2_哔哩哔哩_bilibili 4、参考论文 略

光量子计算公司ORCA将在英国国家量子计算中心部署量子计算测试平台

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨慕一 编译/排版丨沛贤 深度好文&#xff1a;800字丨7分钟阅读 全栈光量子计算系统公司ORCA Computing 将为英国国家量子计算中心&#xff08;NQCC&#xff09;搭建量子计算测试平台并提…

cad技巧

cad技巧 直线&#xff0c;斜线 移动&#xff0c;偏移&#xff0c;复制 圆&#xff0c;椭圆&#xff0c;圆弧 打断&#xff0c;延伸 线型比例&#xff0c;圆角&#xff0c;分解&#xff0c;文字编辑 矩形&#xff0c;合并&#xff0c;多段线&#xff0c;样条曲线 倒角&#xff…

上海AI Lab联合上交推出复杂图表推理多模态评测基准ChartX与基座模型ChartVLM

近期&#xff0c;众多多模态大语言模型&#xff08;MLLM&#xff09;相继问世。然而&#xff0c;这些模型对于视觉图表中所包含的信息的感知能力以及推理能力尚未得到充分的挖掘与探索。本研究中&#xff0c;为了对现有的 MLLM 在图表领域的性能进行全方位、严格的评估&#xf…

电机Id Iq区别

电机Id Iq区别 交流电机的id和iq是什么 交流电机的id和iq是什么 &#xff08;初学者必须掌握的交流电机基础知识&#xff09; 交流电机是现代工业中广泛使用的一种电动机&#xff0c;它具有高效、可靠、节能等优点。但是&#xff0c;对于初学者来说&#xff0c;掌握交流电机的…

pytorch简单新型模型测试参数

import torch from torch.nn import Conv2d,MaxPool2d,Sequential,Flatten,Linear import torchvision import torch.optim.optimizer from torch.utils.data import DataLoader,dataset from torch import nn import torch.optim.optimizer# 建模 model nn.Linear(2,1)#损失 …