vue 下配置标题栏 title 图标及文字的具体步骤

本文详细介绍如何在项目中配置.ico图标文件,并在index.html页面上设置标题栏文字。通过在项目根目录放置.ico文件,修改index.html中的<link>标签引用此图标,以及在webpack配置文件中使用HtmlWebpackPlugin插件指定favicon路径,实现项目图标和标题栏的自定义。最后,通过npm install和npm run dev重启项目使更改生效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 . 将图片.ico 文件放在项目根目录下

这里写图片描述


2 . 在 index.html 页面上配置图标及文字

在项目的index.html 中:

<head>
  <title>标题栏文字</title>
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>

    1
    2
    3
    4

3 . 修改 build 文件夹下 webpack.prod.conf.js 和 webpack.dev.conf.js 文件

webpack.prod.conf.js 和 webpack.dev.conf.js 文件都要添加以下内容:

var path = require('path') // 开头引入 path 模块
....
// HtmlWebpackPlugin 中添加 favicon
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  favicon: path.resolve('favicon.ico'), // 引入图片地址
  inject: true
})

    1
    2
    3
    4
    5
    6
    7
    8
    9

webpack.dev.conf.js文件
webpack.prod.conf.js文件

一般在webpack.prod.conf.js文件下已经引入了path, 但是在webpack.dev.conf.js 文件下没有引入,需要在webpack.dev.conf.js文件下引入一次:
这里写图片描述
4 . 重新启动项目即可。

npm install
npm run dev
--------------------- 
作者:lanc336 
来源:优快云 
原文:https://blog.youkuaiyun.com/weixin_41767649/article/details/79986756 
版权声明:本文为博主原创文章,转载请附上博文链接!

 

        mounted()  created里面也可以设置标题
document.title = "后台管理";

### UniApp Vue3 下自定义导航栏的使用教程 在 UniApp 和 Vue3 的开发环境中,可以通过多种方式实现自定义导航栏的功能和样式。以下是详细的说明: #### 1. 配置 `page.json` 文件 为了启用自定义导航栏功能,需要修改当前页面的配置文件 `page.json` 中的相关属性。具体来说,设置 `navigationStyle` 属性为 `"custom"` 可以隐藏默认的小程序顶部导航栏。 ```json { "path": "pages/example/example", "style": { "navigationBarTitleText": "示例页面", "enablePullDownRefresh": false, "navigationStyle": "custom" } } ``` 通过以上配置可以移除原生导航栏并允许开发者自行设计界面[^1]。 --- #### 2. 创建自定义导航栏组件 创建一个新的 Vue 组件作为自定义导航栏的基础结构。例如,在项目目录下新建名为 `Navbar.vue` 的文件,并按照需求编写 HTML 结构以及绑定事件逻辑。 ##### 示例代码 (`Navbar.vue`) ```vue <template> <view class="custom-navbar"> <!-- 左侧区域 --> <view class="left-area" @tap="handleLeftAction"> <slot name="left"></slot> <!-- 插槽用于动态加载图标或其他内容 --> </view> <!-- 中间标题区 --> <view class="center-title">{{ title }}</view> <!-- 右侧操作区 --> <view class="right-action" @tap="handleRightAction"> <slot name="right"></slot> </view> </view> </template> <script setup lang="ts"> import { ref } from 'vue'; const props = defineProps({ title: String, // 接收父级传递过来的标题文字 }); // 定义左侧点击回调函数 function handleLeftAction() { console.log('左侧被点击'); } // 定义右侧点击回调函数 function handleRightAction() { console.log('右侧被点击'); } </script> <style scoped> .custom-navbar { display: flex; align-items: center; justify-content: space-between; height: var(--status-bar-height); /* 动态获取状态栏高度 */ background-color: #ffffff; padding: 0 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .left-area, .right-action { width: 40px; text-align: center; } .center-title { font-size: 17px; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> ``` 此部分展示了如何利用插槽机制灵活调整不同位置的内容显示效果[^4]。 --- #### 3. 将自定义导航栏嵌入到目标页面 完成上述步骤之后,可以在任意页面引入刚刚制作好的 `Navbar.vue` 并传参控制其表现形式。 ##### 页面实例化调用 ```vue <template> <view> <!-- 自定义导航栏 --> <navbar :title="'首页'" /> <!-- 主体内容 --> <scroll-view scroll-y style="height: calc(100vh - var(--status-bar-height));"> <text>这里是主体内容...</text> </scroll-view> </view> </template> <script setup lang="ts"> import Navbar from '@/components/Navbar.vue'; </script> ``` 注意这里还设置了滚动视图的高度计算公式来应屏幕尺寸变化情况下的布局问题[^2]。 --- #### 4. 处理返回按键的行为 如果希望进一步增强用户体验,则需考虑当用户按下物理硬件上的“返回”键或者界面上某个特定按钮时触发的动作响应。这可通过监听全局生命周期钩子方法 `onBackPress()` 实现。 ##### 返回按键处理样例 ```javascript export default { methods: { onBackPress(options) { const source = options.from || ''; // 获取来源类型 if (source === 'backbutton') { this.$emit('close'); // 告知上级关闭本层弹窗之类的操作 return true; // 表明已拦截掉此次退出请求 } return false; // 默认继续执行原有流程 }, }, onLoad() {}, }; ``` 这段脚本解释了如何区分不同的回退场景从而采取相应的措施[^3]。 --- ### 总结 综上所述,借助于 UniApp 提供的强大框架特性加上现代前端技术栈的支持,完全可以轻松打造出既美观又实用性强的各种个性化导航解决方案!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值